Skip to content

Commit a49c963

Browse files
Gabriele-ZiniGabriele-Zini
committed
add: carousel
0 parents  commit a49c963

File tree

10 files changed

+306
-0
lines changed

10 files changed

+306
-0
lines changed

‎README.md

Whitespace-only changes.

‎css/style.css

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/* RESET */
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
/* COMMON */
10+
.container {
11+
max-width: 800px;
12+
margin: 0 auto;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
flex-direction: column;
17+
18+
}
19+
20+
body {
21+
padding: 5rem;
22+
background-color: beige;
23+
}
24+
25+
.items {
26+
position: relative;
27+
width: 900px;
28+
height: 500px;
29+
margin: 0 auto;
30+
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.322);
31+
display: flex;
32+
}
33+
34+
.item {
35+
height: 100%;
36+
display: none;
37+
position: relative;
38+
width:calc(900px - 150px);
39+
}
40+
41+
.item img {
42+
width: 100%;
43+
height: 100%;
44+
object-fit: cover;
45+
46+
}
47+
48+
.item.active {
49+
display: block;
50+
}
51+
52+
.thumbs {
53+
height: 500px;
54+
background: #000;
55+
position: relative;
56+
}
57+
58+
.thumb {
59+
height: calc((500px) / 5);
60+
opacity: 0.5;
61+
}
62+
63+
.thumb img {
64+
width: 100%;
65+
height: 100%;
66+
object-fit: cover;
67+
}
68+
69+
.thumb.active {
70+
border: 2px solid #ccc;
71+
opacity: 1;
72+
}
73+
74+
.prev, .next {
75+
width: 20px;
76+
height: 20px;
77+
margin: 10px 0;
78+
border-radius: 50%;
79+
background: #cccccc9f;
80+
position: absolute;
81+
left: 50%;
82+
transform: translate(-50%);
83+
cursor: pointer;
84+
z-index: 999;
85+
padding: .9rem;
86+
}
87+
88+
.prev {
89+
top: 0;
90+
left: 87%;
91+
}
92+
93+
.next {
94+
bottom: 0;
95+
left: 87%;
96+
}
97+
98+
.prev::after {
99+
content: '';
100+
width: 10px;
101+
height: 10px;
102+
transform: rotate(45deg);
103+
border-top: 3px solid rgba(0, 0, 0, 0.825);
104+
border-right: 3px solid rgba(0, 0, 0, 0.825);
105+
display: block;
106+
position: absolute;
107+
top: 35%;
108+
left: 50%;
109+
transform: translate(-50%) rotate(-45deg);
110+
}
111+
112+
.next::before {
113+
content: '';
114+
width: 10px;
115+
height: 10px;
116+
transform: rotate(45deg);
117+
border-top: 3px solid black;
118+
border-right: 3px solid black;
119+
display: block;
120+
position: absolute;
121+
bottom: 35%;
122+
left: 50%;
123+
transform: translate(-50%) rotate(135deg);
124+
}
125+
126+
.preview-container {
127+
display: flex;
128+
justify-content: center;
129+
flex-direction: column;
130+
position: relative;
131+
}
132+
133+
/* Utilities */
134+
135+
.absolute {
136+
position: absolute;
137+
bottom: 5%;
138+
color: white;
139+
padding: 2rem;
140+
font-size: 1.2rem;
141+
text-align: end;
142+
}

‎img/01.webp

118 KB
Binary file not shown.

‎img/02.webp

268 KB
Binary file not shown.

‎img/03.webp

394 KB
Binary file not shown.

‎img/04.webp

366 KB
Binary file not shown.

‎img/05.webp

644 KB
Binary file not shown.

‎index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<!-- style -->
8+
<link rel="stylesheet" href="./css/style.css" />
9+
</head>
10+
11+
<body>
12+
<div class="container">
13+
<div class="items">
14+
<div class="prev"></div>
15+
<div class="next"></div>
16+
<div class="thumbs"></div>
17+
</div>
18+
</div>
19+
20+
<script src="./js/data.js"></script>
21+
<script src="./js/script.js"></script>
22+
</body>
23+
</html>

‎js/data.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const images = [
2+
{
3+
image: "../img/01.webp",
4+
title: "Marvel's Spiderman Miles Morale",
5+
text: "Experience the rise of Miles Morales as the new hero masters incredible, explosive new powers to become his own Spider-Man.",
6+
},
7+
{
8+
image: "../img/02.webp",
9+
title: "Ratchet & Clank: Rift Apart",
10+
text: "Go dimension-hopping with Ratchet and Clank as they take on an evil emperor from another reality.",
11+
},
12+
{
13+
image: "../img/03.webp",
14+
title: "Fortnite",
15+
text: "Grab all of your friends and drop into Epic Games Fortnite, a massive 100 - player face - off that combines looting, crafting, shootouts and chaos.",
16+
},
17+
{
18+
image: "../img/04.webp",
19+
title: "Stray",
20+
text: "Lost, injured and alone, a stray cat must untangle an ancient mystery to escape a long-forgotten city",
21+
},
22+
{
23+
image: "../img/05.webp",
24+
title: "Marvel's Avengers",
25+
text: "Marvel's Avengers is an epic, third-person, action-adventure game that combines an original, cinematic story with single-player and co-operative gameplay.",
26+
},
27+
];

‎js/script.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
// DATA
2+
const container = document.querySelector(".container");
3+
const items = document.querySelector(".items");
4+
const prevBtn = document.querySelector(".prev");
5+
const nextBtn = document.querySelector(".next");
6+
const thumbsContainer = document.querySelector(".thumbs");
7+
8+
let autoplay = false;
9+
10+
createDivImg();
11+
createPreview();
12+
setInterval(sliderInterval, 3000);
13+
let currentIndex = 0;
14+
15+
const imageItem = document.querySelectorAll(".item");
16+
imageItem[currentIndex].classList.add("active");
17+
18+
prevBtn.addEventListener("click", prevHandle);
19+
nextBtn.addEventListener("click", nextHandle);
20+
21+
container.addEventListener("mouseover", function () {
22+
autoplay = false;
23+
});
24+
25+
container.addEventListener("mouseout", function () {
26+
autoplay = true;
27+
});
28+
29+
// FUNCTIONS
30+
function createDivImg() {
31+
images.forEach((curImage) => {
32+
let image = document.createElement("div");
33+
image.classList.add("item");
34+
items.appendChild(image);
35+
image.innerHTML = drawImage(curImage);
36+
});
37+
}
38+
39+
function drawImage(curImage) {
40+
return `
41+
<img src="img/${curImage.image}"/>
42+
<div class="absolute">
43+
<h3>${curImage.title}</h3>
44+
<p>${curImage.text}</p>
45+
</div>
46+
`;
47+
}
48+
49+
function prevHandle() {
50+
imageItem[currentIndex].classList.remove("active");
51+
currentIndex--;
52+
if (currentIndex < 0) {
53+
currentIndex = imageItem.length - 1;
54+
}
55+
imageItem[currentIndex].classList.add("active");
56+
}
57+
58+
function nextHandle() {
59+
imageItem[currentIndex].classList.remove("active");
60+
currentIndex++;
61+
if (currentIndex >= imageItem.length) {
62+
currentIndex = 0;
63+
}
64+
imageItem[currentIndex].classList.add("active");
65+
}
66+
67+
function sliderInterval() {
68+
if (autoplay) {
69+
imageItem[currentIndex].classList.remove("active");
70+
previewItems[currentIndex].classList.remove("active");
71+
currentIndex++;
72+
if (currentIndex >= imageItem.length) {
73+
currentIndex = 0;
74+
}
75+
imageItem[currentIndex].classList.add("active");
76+
previewItems[currentIndex].classList.add("active");
77+
}
78+
}
79+
80+
function createPreview() {
81+
let previewDiv = "";
82+
images.forEach((image) => {
83+
previewDiv += `<div class="thumb"><img src="img/${image.image}" alt=""></div>`;
84+
});
85+
document.querySelector(".thumbs").innerHTML = previewDiv;
86+
thumbsContainer.remove();
87+
items.appendChild(thumbsContainer);
88+
return previewDiv;
89+
}
90+
91+
const previewItems = document.querySelectorAll(".thumb");
92+
previewItems[currentIndex].classList.add("active");
93+
attachClickHandlers(previewItems);
94+
95+
function attachClickHandlers(previewItems) {
96+
for (let i = 0; i < previewItems.length; i++) {
97+
const preview = previewItems[i];
98+
99+
preview.addEventListener("click", function () {
100+
previewItems.forEach((item) => {
101+
item.classList.remove("active");
102+
});
103+
preview.classList.add("active");
104+
105+
currentIndex = i;
106+
updateMainImage();
107+
});
108+
}
109+
}
110+
111+
function updateMainImage() {
112+
document.querySelector(".item.active").classList.remove("active");
113+
imageItem[currentIndex].classList.add("active");
114+
}

0 commit comments

Comments
 (0)