Double Vertical Slider | Image Gallery with Vertical Slider - codewithrandom
Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Double Vertical Slider. We use HTML, and javascript for this Double Vertical Slider. Hope you enjoy our blog so let's start with a basic HTML structure for a Double Vertical Slider.
add font awesome in Html
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css
HTML code for Vertical Slider
<div class="slider-container">
<div class="left-slide">
<div style="background-color: #b99f8a">
<h1>Nature</h1>
<p>new collection</p>
</div>
<div style="background-color: #354f32">
<h1>Cars</h1>
<p>new collection</p>
</div>
<div style="background-color: #657e85">
<h1>Cars</h1>
<p>new collection</p>
</div>
<div style="background-color: #2b2e32">
<h1>Nature</h1>
<p>new collection</p>
</div>
</div>
<div class="right-slide">
<div
style="
background-image: url('https://source.unsplash.com/1600x900/?nature,water');
"
></div>
<div
style="
background-image: url('https://source.unsplash.com/1600x900/?car,cars');
"
></div>
<div
style="
background-image: url('https://source.unsplash.com/1600x900/?car,cars');
"
></div>
<div
style="
background-image: url('https://source.unsplash.com/1600x900/?nature,water'););
"
></div>
</div>
<div class="action-buttons">
<button class="down-button">
<i class="fas fa-arrow-down"></i>
</button>
<button class="up-button">
<i class="fas fa-arrow-up"></i>
</button>
</div>
</div>
There is all HTML code for the Double Vertical Slider. Now, you can see output without CSS, then we write css & javascript for the Double Vertical Slider.output
@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans", sans-serif;
height: 100vh;
}
.slider-container {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.left-slide {
height: 100%;
width: 35%;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease-in-out;
}
.left-slide > div {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
}
.left-slide h1 {
font-size: 40px;
margin-bottom: 10px;
margin-top: -30px;
}
.right-slide {
height: 100%;
position: absolute;
top: 0;
left: 35%;
width: 65%;
transition: transform 0.5s ease-in-out;
}
.right-slide > div {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
}
button {
background-color: #fff;
border: none;
color: #aaa;
cursor: pointer;
font-size: 16px;
padding: 15px;
}
button:hover {
color: #222;
}
button:focus {
outline: none;
}
.slider-container .action-buttons button {
position: absolute;
left: 35%;
top: 50%;
z-index: 100;
}
.slider-container .action-buttons .down-button {
transform: translateX(-100%);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.slider-container .action-buttons .up-button {
transform: translateY(-100%);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Now we have completed our CSS section, Here is our updated output CSS.
output
Now add javascript for click arrow button & functionality for slide images.
Javascript code for Double Vertical Slider
const sliderContainer = document.querySelector(".slider-container");
const slideRight = document.querySelector(".right-slide");
const slideLeft = document.querySelector(".left-slide");
const upButton = document.querySelector(".up-button");
const downButton = document.querySelector(".down-button");
const slidesLength = slideRight.querySelectorAll("div").length;
let activeSlideIndex = 0;
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`;
const changeSlide = (direction) => {
const sliderHeight = sliderContainer.clientHeight;
if (direction === "up") {
activeSlideIndex++;
if (activeSlideIndex > slidesLength - 1) activeSlideIndex = 0;
} else if (direction === "down") {
activeSlideIndex--;
if (activeSlideIndex < 0) activeSlideIndex = slidesLength - 1;
}
slideRight.style.transform = `translateY(-${
activeSlideIndex * sliderHeight
}px)`;
slideLeft.style.transform = `translateY(${
activeSlideIndex * sliderHeight
}px)`;
};
upButton.addEventListener("click", () => changeSlide("up"));
downButton.addEventListener("click", () => changeSlide("down"));
Final outputNow we have completed our javascript section, Here is our updated output with javascript. Hope you like the Double Vertical Slider. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕
Check out more.....
In this post, we learn how to create a Double Vertical Slider form using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
why my button cannot show
ReplyDeletePost a Comment