Skip to content

Commit 98ae887

Browse files
solygambassolygambas
committedJan 15, 2021
add background slider
1 parent 2dcda27 commit 98ae887

File tree

4 files changed

+176
-0
lines changed

4 files changed

+176
-0
lines changed
 

‎17-movie app/style.css

+10
Original file line numberDiff line numberDiff line change
@@ -122,3 +122,13 @@ main {
122122
color: #eee;
123123
text-align: center;
124124
}
125+
126+
@media (max-width: 580px) {
127+
header {
128+
flex-direction: column;
129+
}
130+
131+
header h1 {
132+
padding: 0.5rem 1rem;
133+
}
134+
}

‎18-background slider/index.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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+
<link
7+
rel="stylesheet"
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
9+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
10+
crossorigin="anonymous"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<title>Background Slider</title>
14+
</head>
15+
<body>
16+
<div class="slider-container">
17+
<div
18+
class="slide active"
19+
style="
20+
background-image: url('https://images.unsplash.com/photo-1610620746460-de78cf3d1705?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');
21+
"
22+
></div>
23+
<div
24+
class="slide"
25+
style="
26+
background-image: url('https://images.unsplash.com/photo-1609589079958-8192b9cdab91?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2100&q=80');
27+
"
28+
></div>
29+
<div
30+
class="slide"
31+
style="
32+
background-image: url('https://images.unsplash.com/photo-1605718665998-85fbd49c5eff?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=2100&q=80');
33+
"
34+
></div>
35+
<div
36+
class="slide"
37+
style="
38+
background-image: url('https://images.unsplash.com/photo-1609589079852-0b1c745a71ec?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');
39+
"
40+
></div>
41+
<div
42+
class="slide"
43+
style="
44+
background-image: url('https://images.unsplash.com/photo-1604916010805-18ea15fa6d32?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80');
45+
"
46+
></div>
47+
<button class="arrow left-arrow" id="left">
48+
<i class="fas fa-arrow-left"></i>
49+
</button>
50+
<button class="arrow right-arrow" id="right">
51+
<i class="fas fa-arrow-right"></i>
52+
</button>
53+
</div>
54+
<script src="script.js"></script>
55+
</body>
56+
</html>

‎18-background slider/script.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const body = document.body;
2+
const slides = document.querySelectorAll(".slide");
3+
const leftButton = document.getElementById("left");
4+
const rightButton = document.getElementById("right");
5+
6+
let activeSlide = 0;
7+
8+
const setBackground = () => {
9+
body.style.backgroundImage = slides[activeSlide].style.backgroundImage;
10+
};
11+
12+
const setActiveSlide = () => {
13+
slides.forEach((slide) => slide.classList.remove("active"));
14+
slides[activeSlide].classList.add("active");
15+
};
16+
17+
rightButton.addEventListener("click", () => {
18+
activeSlide++;
19+
if (activeSlide > slides.length - 1) activeSlide = 0;
20+
setBackground();
21+
setActiveSlide();
22+
});
23+
24+
leftButton.addEventListener("click", () => {
25+
activeSlide--;
26+
if (activeSlide < 0) activeSlide = slides.length - 1;
27+
setBackground();
28+
setActiveSlide();
29+
});
30+
31+
setBackground();

‎18-background slider/style.css

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Roboto", sans-serif;
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
overflow: hidden;
15+
margin: 0;
16+
background-position: center center;
17+
background-size: cover;
18+
transition: 0.4s ease;
19+
}
20+
21+
body::before {
22+
content: "";
23+
position: absolute;
24+
top: 0;
25+
left: 0;
26+
width: 100%;
27+
height: 100vh;
28+
background-color: rgba(0, 0, 0, 0.7);
29+
z-index: -1;
30+
}
31+
32+
.slider-container {
33+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
34+
height: 70vh;
35+
width: 70vw;
36+
position: relative;
37+
overflow: hidden;
38+
}
39+
40+
.slide {
41+
opacity: 0;
42+
height: 100vh;
43+
width: 100vw;
44+
background-position: center center;
45+
background-size: cover;
46+
position: absolute;
47+
top: -15vh;
48+
left: -15vw;
49+
transition: 0.4s ease;
50+
z-index: 1;
51+
}
52+
53+
.slide.active {
54+
opacity: 1;
55+
}
56+
57+
.arrow {
58+
position: fixed;
59+
background-color: transparent;
60+
padding: 20px;
61+
font-size: 30px;
62+
color: #fff;
63+
border: 2px solid orange;
64+
top: 50%;
65+
transform: translateY(-50%);
66+
cursor: pointer;
67+
}
68+
69+
.arrow:focus {
70+
outline: 0;
71+
}
72+
73+
.left-arrow {
74+
left: calc(15vw - 65px);
75+
}
76+
77+
.right-arrow {
78+
right: calc(15vw - 65px);
79+
}

0 commit comments

Comments
 (0)
Please sign in to comment.