source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Vertical Image Slider</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(120deg, #84fab0, #8fd3f4);
}
.slider {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.slides {
display: flex;
flex-direction: column;
transition: transform 0.5s ease-in-out;
}
.slide {
width: 100%;
height: 300px;
flex-shrink: 0;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.navigation {
position: absolute;
top: 50%;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 10;
}
.navigation button {
background: rgba(0, 0, 0, 0.5);
border: none;
color: #fff;
font-size: 18px;
padding: 10px;
cursor: pointer;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.navigation button:hover {
background: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class=”slider”>
<div class=”slides” id=”slides”>
<div class=”slide”>
<img src=”https://images.unsplash.com/photo-1591350797228-e21cd0abd02f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzF8fGhpbGx8ZW58MHx8MHx8fDA%3D” alt=”Slide 1″>
</div>
<div class=”slide”>
<img src=”https://plus.unsplash.com/premium_photo-1676464856956-d0aebd9d30f2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzN8fGhpbGx8ZW58MHx8MHx8fDA%3D” alt=”Slide 2″>
</div>
<div class=”slide”>
<img src=”https://images.unsplash.com/photo-1542178036-b7a4152d9a53?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mzh8fGhpbGx8ZW58MHx8MHx8fDA%3D” alt=”Slide 3″>
</div>
</div>
<div class=”navigation”>
<button onclick=”moveSlide(-1)”>❮ Up</button>
<button onclick=”moveSlide(1)”>Down ❯</button>
</div>
</div>
<script>
const slides = document.getElementById(‘slides’);
const totalSlides = document.querySelectorAll(‘.slide’).length;
let currentIndex = 0;
function moveSlide(direction) {
currentIndex += direction;
if (currentIndex < 0) {
currentIndex = totalSlides – 1;
} else if (currentIndex >= totalSlides) {
currentIndex = 0;
}
const offset = -currentIndex * 300; // Each slide height is 300px
slides.style.transform = `translateY(${offset}px)`;
}
</script>
</body>
</html>
