├── README.md
├── whatsap.png
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/whatsap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KhujamovCodes/Slider/HEAD/whatsap.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | vision
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
35 |
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const carousel = document.querySelector(".carousel"),
2 | firstImg = carousel.querySelectorAll("img")[0],
3 | arrowIcons = document.querySelectorAll(".wrapper i");
4 |
5 | let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
6 |
7 | const showHideIcons = () => {
8 | let scrollWidth = carousel.scrollWidth - carousel.clientWidth;
9 | arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
10 | arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
11 | }
12 |
13 | arrowIcons.forEach(icon => {
14 | icon.addEventListener("click", () => {
15 | let firstImgWidth = firstImg.clientWidth + 14;
16 | carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
17 | setTimeout(() => showHideIcons(), 60);
18 | });
19 | });
20 |
21 | const autoSlide = () => {
22 | if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
23 |
24 | positionDiff = Math.abs(positionDiff);
25 | let firstImgWidth = firstImg.clientWidth + 14;
26 | let valDifference = firstImgWidth - positionDiff;
27 |
28 | if(carousel.scrollLeft > prevScrollLeft) {
29 | return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
30 | }
31 | carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
32 | }
33 |
34 | const dragStart = (e) => {
35 | isDragStart = true;
36 | prevPageX = e.pageX || e.touches[0].pageX;
37 | prevScrollLeft = carousel.scrollLeft;
38 | }
39 |
40 | const dragging = (e) => {
41 | if(!isDragStart) return;
42 | e.preventDefault();
43 | isDragging = true;
44 | carousel.classList.add("dragging");
45 | positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
46 | carousel.scrollLeft = prevScrollLeft - positionDiff;
47 | showHideIcons();
48 | }
49 |
50 | const dragStop = () => {
51 | isDragStart = false;
52 | carousel.classList.remove("dragging");
53 |
54 | if(!isDragging) return;
55 | isDragging = false;
56 | autoSlide();
57 | }
58 |
59 |
60 | carousel.addEventListener("mousedown", dragStart);
61 | carousel.addEventListener("touchstart", dragStart);
62 |
63 | document.addEventListener("mousemove", dragging);
64 | carousel.addEventListener("touchmove", dragging);
65 |
66 | document.addEventListener("mouseup", dragStop);
67 | carousel.addEventListener("touchend", dragStop);
68 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | font-family: "Poppins", sans-serif;
7 | }
8 |
9 | body{
10 | background: #f4a709;
11 | }
12 |
13 | .section-tuw {
14 | width: 100%;
15 | padding: 50px;
16 | }
17 |
18 | .section-tuw .wrappers__card {
19 | display: flex;
20 | padding: 0 35px;
21 | align-items: center;
22 | justify-content: center;
23 | }
24 |
25 |
26 |
27 | .wrapper {
28 | display: flex;
29 | max-width: 1200px;
30 | position: relative;
31 | }
32 |
33 | .wrapper i {
34 | top: 50%;
35 | height: 44px;
36 | width: 44px;
37 | color: #343F4F;
38 | cursor: pointer;
39 | font-size: 1.15rem;
40 | position: absolute;
41 | text-align: center;
42 | line-height: 44px;
43 | background: #fff;
44 | border-radius: 50%;
45 | transform: translateY(-50%);
46 | transition: transform 0.1s linear;
47 | }
48 |
49 | .wrapper i:active {
50 | transform: translateY(-50%) scale(0.9);
51 | }
52 |
53 | .wrapper i:hover {
54 | background: #f2f2f2;
55 | }
56 |
57 | .wrapper i:first-child {
58 | left: -22px;
59 | display: none;
60 | }
61 |
62 | .wrapper i:last-child {
63 | right: -22px;
64 | }
65 |
66 | .wrapper .carousel {
67 | font-size: 0;
68 | cursor: pointer;
69 | overflow: hidden;
70 | white-space: nowrap;
71 | scroll-behavior: smooth;
72 | }
73 |
74 | .wrapper .carousel.dragging {
75 | cursor: grab;
76 | scroll-behavior: auto;
77 | }
78 |
79 | .wrapper .carousel.dragging img {
80 | pointer-events: none;
81 | }
82 |
83 | .wrapper .carousel img {
84 | width: 250px;
85 | height: 360px;
86 | -o-object-fit: cover;
87 | object-fit: cover;
88 | -webkit-user-select: none;
89 | -moz-user-select: none;
90 | user-select: none;
91 | }
92 |
93 | .wrapper .carousel img:first-child {
94 | margin-left: 0px;
95 | }
96 | @media screen and (max-width: 1200px) {
97 | .wrapper .carousel img {
98 | width: 40%;
99 | }
100 | }
101 |
102 | @media screen and (max-width: 900px) {
103 | .wrapper .carousel img {
104 | width: 50%;
105 | }
106 | }
107 |
108 | @media screen and (max-width: 550px) {
109 | .wrapper .carousel img {
110 | width: 100%;
111 | }
112 | }
113 |
114 | .container__texts {
115 | display: grid;
116 | justify-content: center;
117 | grid-template-columns: 59% auto;
118 | color: #fff;
119 | }
120 | .container__texts__card1 {
121 | font-size: 1.125rem;
122 | font-weight: 400;
123 | margin-top: 65px;
124 | }
125 | .container__texts__card2 {
126 | font-weight: bold;
127 | font-size: 40px;
128 | justify-content: end;
129 | align-items: center;
130 | color: #fff;
131 | display: flex;
132 | }
133 |
134 | .chat p:hover {
135 | color: #f1c50e;
136 | }
137 |
138 | @media only screen and (max-width: 600px) {
139 | .container__texts {
140 | grid-template-columns: repeat(1, 1fr);
141 | }
142 | }
143 |
144 | /*# sourceMappingURL=style.css.map */
145 |
--------------------------------------------------------------------------------
31 |