Skip to content

Commit 2edafca

Browse files
solygambassolygambas
committed
add double vertical slider
1 parent 4cc21a4 commit 2edafca

File tree

4 files changed

+196
-1
lines changed

4 files changed

+196
-1
lines changed

‎26-double vertical slider/index.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
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>Vertical Slider</title>
14+
</head>
15+
<body>
16+
<div class="slider-container">
17+
<div class="left-slide">
18+
<div style="background-color: #6b7d67">
19+
<h1>Accessories</h1>
20+
<p>new collection</p>
21+
</div>
22+
<div style="background-color: #2aa6c0">
23+
<h1>Pareos</h1>
24+
<p>new collection</p>
25+
</div>
26+
<div style="background-color: #354f32">
27+
<h1>Swimsuits</h1>
28+
<p>new collection</p>
29+
</div>
30+
<div style="background-color: #657e85">
31+
<h1>Crop Tops</h1>
32+
<p>new collection</p>
33+
</div>
34+
</div>
35+
<div class="right-slide">
36+
<div
37+
style="
38+
background-image: url('https://images.unsplash.com/photo-1552996923-5063f7db50ee?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80');
39+
"
40+
></div>
41+
<div
42+
style="
43+
background-image: url('https://images.unsplash.com/photo-1559992490-51463933f67e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
44+
"
45+
></div>
46+
<div
47+
style="
48+
background-image: url('https://images.unsplash.com/photo-1561076722-85adfb3195cb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80');
49+
"
50+
></div>
51+
<div
52+
style="
53+
background-image: url('https://images.unsplash.com/photo-1567640157569-f93dc2275420?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
54+
"
55+
></div>
56+
</div>
57+
<div class="action-buttons">
58+
<button class="down-button">
59+
<i class="fas fa-arrow-down"></i>
60+
</button>
61+
<button class="up-button">
62+
<i class="fas fa-arrow-up"></i>
63+
</button>
64+
</div>
65+
</div>
66+
<script src="script.js"></script>
67+
</body>
68+
</html>

‎26-double vertical slider/script.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const sliderContainer = document.querySelector(".slider-container");
2+
const slideRight = document.querySelector(".right-slide");
3+
const slideLeft = document.querySelector(".left-slide");
4+
const upButton = document.querySelector(".up-button");
5+
const downButton = document.querySelector(".down-button");
6+
const slidesLength = slideRight.querySelectorAll("div").length;
7+
8+
let activeSlideIndex = 0;
9+
10+
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`;
11+
12+
const changeSlide = (direction) => {
13+
const sliderHeight = sliderContainer.clientHeight;
14+
if (direction === "up") {
15+
activeSlideIndex++;
16+
if (activeSlideIndex > slidesLength - 1) activeSlideIndex = 0;
17+
} else if (direction === "down") {
18+
activeSlideIndex--;
19+
if (activeSlideIndex < 0) activeSlideIndex = slidesLength - 1;
20+
}
21+
slideRight.style.transform = `translateY(-${
22+
activeSlideIndex * sliderHeight
23+
}px)`;
24+
slideLeft.style.transform = `translateY(${
25+
activeSlideIndex * sliderHeight
26+
}px)`;
27+
};
28+
29+
upButton.addEventListener("click", () => changeSlide("up"));
30+
downButton.addEventListener("click", () => changeSlide("down"));

‎26-double vertical slider/style.css

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
body {
10+
font-family: "Open Sans", sans-serif;
11+
height: 100vh;
12+
}
13+
14+
.slider-container {
15+
position: relative;
16+
overflow: hidden;
17+
width: 100vw;
18+
height: 100vh;
19+
}
20+
21+
.left-slide {
22+
height: 100%;
23+
width: 35%;
24+
position: absolute;
25+
top: 0;
26+
left: 0;
27+
transition: transform 0.5s ease-in-out;
28+
}
29+
30+
.left-slide > div {
31+
height: 100%;
32+
width: 100%;
33+
display: flex;
34+
flex-direction: column;
35+
align-items: center;
36+
justify-content: center;
37+
color: #fff;
38+
}
39+
40+
.left-slide h1 {
41+
font-size: 40px;
42+
margin-bottom: 10px;
43+
margin-top: -30px;
44+
}
45+
46+
.right-slide {
47+
height: 100%;
48+
position: absolute;
49+
top: 0;
50+
left: 35%;
51+
width: 65%;
52+
transition: transform 0.5s ease-in-out;
53+
}
54+
55+
.right-slide > div {
56+
background-repeat: no-repeat;
57+
background-size: cover;
58+
background-position: center center;
59+
height: 100%;
60+
width: 100%;
61+
}
62+
63+
button {
64+
background-color: #fff;
65+
border: none;
66+
color: #aaa;
67+
cursor: pointer;
68+
font-size: 16px;
69+
padding: 15px;
70+
}
71+
72+
button:hover {
73+
color: #222;
74+
}
75+
76+
button:focus {
77+
outline: none;
78+
}
79+
80+
.slider-container .action-buttons button {
81+
position: absolute;
82+
left: 35%;
83+
top: 50%;
84+
z-index: 100;
85+
}
86+
87+
.slider-container .action-buttons .down-button {
88+
transform: translateX(-100%);
89+
border-top-left-radius: 5px;
90+
border-bottom-left-radius: 5px;
91+
}
92+
93+
.slider-container .action-buttons .up-button {
94+
transform: translateY(-100%);
95+
border-top-right-radius: 5px;
96+
border-bottom-right-radius: 5px;
97+
}

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
| 23 | [Kinetic Loader](https://github.com/solygambas/html-css-fifty-projects/tree/master/23-kinetic%20loader) | [Live Demo](https://codepen.io/solygambas/pen/JjRwVLW) |
3232
| 24 | [Content Placeholder](https://github.com/solygambas/html-css-fifty-projects/tree/master/24-content%20placeholder) | [Live Demo](https://codepen.io/solygambas/pen/ExgGzaX) |
3333
| 25 | [Sticky Navbar](https://github.com/solygambas/html-css-fifty-projects/tree/master/25-sticky%20navigation) | [Live Demo](https://codepen.io/solygambas/pen/VwKqJmw/) |
34-
| 26 | [Double Vertical Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/double-vertical-slider) | [Live Demo](/double-vertical-slider/) |
34+
| 26 | [Double Vertical Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/26-double%20vertical%20slider) | [Live Demo](https://codepen.io/solygambas/pen/wvzNwqB) |
3535
| 27 | [Toast Notification](https://github.com/solygambas/html-css-fifty-projects/tree/master/toast-notification) | [Live Demo](/toast-notification/) |
3636
| 28 | [Github Profiles](https://github.com/solygambas/html-css-fifty-projects/tree/master/github-profiles) | [Live Demo](/github-profiles/) |
3737
| 29 | [Double Click Heart](https://github.com/solygambas/html-css-fifty-projects/tree/master/double-click-heart) | [Live Demo](/double-click-heart/) |

0 commit comments

Comments
 (0)