├── script.js
├── style.css
└── index.html
/script.js:
--------------------------------------------------------------------------------
1 | window.onload = () => {
2 |
3 | let slides = document.querySelectorAll(".slide");
4 | let nextBtn = document.querySelector(".btn-right");
5 | let backBtn = document.querySelector(".btn-left");
6 | let box = document.querySelector(".box");
7 |
8 | let slideIndex = 0;
9 | let maxIndex = slides.length - 1;
10 |
11 | console.log(backBtn)
12 |
13 | nextBtn.addEventListener("click", () => {
14 |
15 | if (slideIndex === maxIndex) {
16 | slideIndex = 0;
17 | } else {
18 | slideIndex++;
19 | }
20 |
21 | slides.forEach((slide, index) => {
22 | slide.style.transform = `translateX(${100 * (index - slideIndex)}%)`;
23 | })
24 | })
25 |
26 | backBtn.addEventListener("click", () => {
27 |
28 | if (slideIndex === 0) {
29 | slideIndex = maxIndex
30 | } else {
31 | slideIndex--;
32 | }
33 |
34 | slides.forEach((slide, index) => {
35 | slide.style.transform = `translateX(${100 * (index - slideIndex)}%)`
36 | })
37 | })
38 |
39 | slides.forEach((slide, index) => {
40 | slide.addEventListener("mouseover", () => {
41 | box.style.display = "flex";
42 | slide.style.setProperty("--display", "flex");
43 | });
44 | slide.addEventListener("mouseout", () => {
45 | box.style.display = "none";
46 | slide.style.setProperty("--display", "none");
47 |
48 | })
49 | })
50 |
51 |
52 |
53 |
54 |
55 |
56 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | background: blue;
6 | height: 100%;
7 | }
8 |
9 | .container {
10 | display: flex;
11 | flex-direction: column;
12 | justify-content: center;
13 | align-items: center;
14 | width: 100%;
15 | max-width: 80%;
16 | }
17 |
18 | .box {
19 | margin-bottom: 2em;
20 | width: 80%;
21 | border: 1px solid #00ffe9;
22 | border-radius: 5px;
23 | padding: 10px;
24 | position: absolute;
25 | top: 30%;
26 | display: none;
27 | justify-content: center;
28 | align-content: center;
29 | }
30 |
31 | .carousel {
32 | display: flex;
33 | width: 100%;
34 | align-items: center;
35 | justify-content: center;
36 | }
37 |
38 | .btn {
39 | padding: 10px 20px;
40 | cursor: pointer;
41 | border-radius: 5px;
42 | border: none;
43 | background: rosybrown;
44 | letter-spacing: 2px;
45 | }
46 |
47 | .left-btn {
48 | text-align: center;
49 | margin-right: 1.5em;
50 | }
51 |
52 | .right-btn {
53 | text-align: center;
54 | margin-left: 1.5em;
55 | }
56 |
57 | .slider {
58 | display: flex;
59 | align-items: center;
60 | justify-content: center;
61 | width: 100%;
62 | max-width: 800px;
63 | height: 300px;
64 | border-radius: 10px;
65 | position: relative;
66 | overflow: hidden;
67 | }
68 |
69 | .slide {
70 | /* position: absolute; */
71 | /* width: 50%; */
72 | max-width: 800px;
73 | height: 70px;
74 | transition: all 0.5s;
75 | cursor: pointer;
76 | display: flex;
77 | justify-content: center;
78 | }
79 |
80 | :root {
81 | --display: none;
82 | }
83 |
84 | .slide::before {
85 | content: '';
86 | display: var(--display) !important;
87 | position: absolute;
88 | top: -1.5em;
89 | text-align: center;
90 | width: 1px;
91 | height: 0px;
92 | border-left: 5px solid transparent;
93 | border-right: 6px solid transparent;
94 | border-bottom: 20px solid black;
95 | }
96 |
97 | .img {
98 | width: 100%;
99 | height: 100%;
100 | border-radius: 50%;
101 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Slider
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
21 |
22 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |