Skip to content

Commit cb9f9e5

Browse files
solygambassolygambas
committed
add full screen image slider
1 parent 789706f commit cb9f9e5

File tree

4 files changed

+253
-0
lines changed

4 files changed

+253
-0
lines changed

‎83-full screen image slider/index.html

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!-- Based on Full Screen Responsive Image Slider by Brad Traversy (2019)
2+
see: https://www.youtube.com/watch?v=wWWNrANNO1k -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
12+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
13+
crossorigin="anonymous"
14+
/>
15+
<link rel="stylesheet" href="style.css" />
16+
<title>Full Screen Image Slider</title>
17+
</head>
18+
<body>
19+
<div class="slider">
20+
<div class="slide current">
21+
<div class="content">
22+
<h1>Slide One</h1>
23+
<p>
24+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis
25+
autem aliquam itaque libero delectus temporibus?
26+
</p>
27+
</div>
28+
</div>
29+
<div class="slide">
30+
<div class="content">
31+
<h1>Slide Two</h1>
32+
<p>
33+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis
34+
autem aliquam itaque libero delectus temporibus?
35+
</p>
36+
</div>
37+
</div>
38+
<div class="slide">
39+
<div class="content">
40+
<h1>Slide Three</h1>
41+
<p>
42+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis
43+
autem aliquam itaque libero delectus temporibus?
44+
</p>
45+
</div>
46+
</div>
47+
<div class="slide">
48+
<div class="content">
49+
<h1>Slide Four</h1>
50+
<p>
51+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis
52+
autem aliquam itaque libero delectus temporibus?
53+
</p>
54+
</div>
55+
</div>
56+
<div class="slide">
57+
<div class="content">
58+
<h1>Slide Five</h1>
59+
<p>
60+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis
61+
autem aliquam itaque libero delectus temporibus?
62+
</p>
63+
</div>
64+
</div>
65+
<div class="slide">
66+
<div class="content">
67+
<h1>Slide Six</h1>
68+
<p>
69+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis
70+
autem aliquam itaque libero delectus temporibus?
71+
</p>
72+
</div>
73+
</div>
74+
</div>
75+
<div class="buttons">
76+
<button id="prev"><i class="fas fa-arrow-left"></i></button>
77+
<button id="next"><i class="fas fa-arrow-right"></i></button>
78+
</div>
79+
<script src="script.js"></script>
80+
</body>
81+
</html>

‎83-full screen image slider/script.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const slides = document.querySelectorAll(".slide");
2+
const nextButton = document.getElementById("next");
3+
const prevButton = document.getElementById("prev");
4+
const auto = true;
5+
const intervalTime = 5000;
6+
let slideInterval;
7+
8+
const nextSlide = () => {
9+
const current = document.querySelector(".current");
10+
current.classList.remove("current");
11+
if (current.nextElementSibling) {
12+
current.nextElementSibling.classList.add("current");
13+
} else {
14+
slides[0].classList.add("current");
15+
}
16+
};
17+
18+
const prevSlide = () => {
19+
const current = document.querySelector(".current");
20+
current.classList.remove("current");
21+
if (current.previousElementSibling) {
22+
current.previousElementSibling.classList.add("current");
23+
} else {
24+
slides[slides.length - 1].classList.add("current");
25+
}
26+
};
27+
28+
nextButton.addEventListener("click", () => {
29+
nextSlide();
30+
if (auto) {
31+
clearInterval(slideInterval);
32+
slideInterval = setInterval(nextSlide, intervalTime);
33+
}
34+
});
35+
prevButton.addEventListener("click", () => {
36+
prevSlide();
37+
if (auto) {
38+
clearInterval(slideInterval);
39+
slideInterval = setInterval(nextSlide, intervalTime);
40+
}
41+
});
42+
43+
if (auto) {
44+
slideInterval = setInterval(nextSlide, intervalTime);
45+
}

‎83-full screen image slider/style.css

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
body {
10+
font-family: "Lexend", sans-serif;
11+
background-color: #362a2b;
12+
color: #e5ebf3;
13+
line-height: 1.6;
14+
}
15+
16+
.slider {
17+
position: relative;
18+
width: 100vw;
19+
height: 100vh;
20+
overflow: hidden;
21+
}
22+
23+
.slide {
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
width: 100%;
28+
height: 100%;
29+
opacity: 0;
30+
transition: opacity 0.4s ease-in-out;
31+
}
32+
33+
.slide.current {
34+
opacity: 1;
35+
}
36+
37+
.slide .content {
38+
position: absolute;
39+
bottom: -300px;
40+
left: 0;
41+
width: 100%;
42+
opacity: 0;
43+
background-color: rgba(229, 235, 243, 0.8);
44+
color: #495b73;
45+
padding: 35px;
46+
}
47+
48+
.slide .content h1 {
49+
margin-bottom: 0.625rem;
50+
color: #362a2b;
51+
}
52+
53+
.slide.current .content {
54+
opacity: 1;
55+
transform: translateY(-300px);
56+
transition: all 0.7s ease-in-out;
57+
}
58+
59+
.slide:first-child {
60+
background: url("https://source.unsplash.com/vTL_qy03D1I/1600x900") no-repeat
61+
center top/cover;
62+
}
63+
64+
.slide:nth-child(2) {
65+
background: url("https://source.unsplash.com/n19qtMX3nNY/1600x900") no-repeat
66+
center top/cover;
67+
}
68+
69+
.slide:nth-child(3) {
70+
background: url("https://source.unsplash.com/_7LbC5J-jw4/1600x900") no-repeat
71+
center top/cover;
72+
}
73+
74+
.slide:nth-child(4) {
75+
background: url("https://source.unsplash.com/_KaMTEmJnxY/1600x900") no-repeat
76+
center top/cover;
77+
}
78+
79+
.slide:nth-child(5) {
80+
background: url("https://source.unsplash.com/3mGnYRUNIck/1600x900") no-repeat
81+
center top/cover;
82+
}
83+
84+
.slide:nth-child(6) {
85+
background: url("https://source.unsplash.com/cxnkcRnwS7M/1600x900") no-repeat
86+
center center/cover;
87+
}
88+
89+
.buttons button#prev {
90+
position: absolute;
91+
top: 50%;
92+
left: 1rem;
93+
}
94+
95+
.buttons button#next {
96+
position: absolute;
97+
top: 50%;
98+
right: 1rem;
99+
}
100+
101+
.buttons button {
102+
border: 2px solid #e5ebf3;
103+
background-color: transparent;
104+
color: #e5ebf3;
105+
cursor: pointer;
106+
padding: 13px 15px;
107+
border-radius: 50%;
108+
outline: none;
109+
}
110+
111+
.buttons button:hover {
112+
background-color: #e5ebf3;
113+
color: #362a2b;
114+
}
115+
116+
@media (min-width: 640px) and (min-height: 640px) {
117+
.slide .content {
118+
bottom: 70px;
119+
left: -600px;
120+
width: 600px;
121+
}
122+
123+
.slide.current .content {
124+
transform: translateX(600px);
125+
}
126+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
| 80 | [Health Dashboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/80-health%20dashboard) | [Live Demo](https://codepen.io/solygambas/full/XWNvEKz) |
8989
| 81 | [Animated SVG](https://github.com/solygambas/html-css-fifty-projects/tree/master/81-animated%20SVG) | [Live Demo](https://codepen.io/solygambas/full/vYyoVWR) |
9090
| 82 | [Parallax Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/82-parallax%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/ExZxxRo) |
91+
| 83 | [Full Screen Image Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/83-full%20screen%20image%20slider) | [Live Demo](https://codepen.io/solygambas/full/JjEoEdb) |
9192

9293
This repository is mostly based on 2 courses by Brad Traversy (2020):
9394

0 commit comments

Comments
 (0)