<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="container">
<div class="row">
<ol>
<li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
<li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
<li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
<li><img src="https://static7.depositphotos.com/1000695/734/i/600/depositphotos_7343574-stock-photo-kitten-on-a-white-background.jpg" alt="" class="pic"></li>
</ol>
<div class="buttons">
<button class="btn prev">Prev</button>
<button class="next">Next</button>
</div>
</div>
</div>
</body>
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
ol{
list-style: none;
width: 200px;
height: 200px;
padding: 0;
display: flex;
flex-direction: column;
border: 2px solid black;
overflow: hidden;
position: relative;
}
ol li{
position: absolute;
width: 100%;
height: 100%;
}
.pic{
height: 100%;
object-fit: cover;
transition: all 0.25s ease-in-out;
}
/*The below code will put the images vertically one below the other*/
ol li:nth-child(2){
transform: translateY(100%);
}
ol li:nth-child(3){
transform: translateY(200%);
}
ol li:nth-child(4){
transform: translateY(300%);
}
.buttons{
display: flex;
gap: 1rem;
}
const imgSlides = document.querySelectorAll(".pic");
const nextBtn = document.querySelector(".next");
const prevBtn = document.querySelector(".prev");
let counter = 0;
nextBtn.addEventListener('click', function(){
counter++;
carouse();
})
prevBtn.addEventListener('click', function(){
counter--;
carouse();
})
function carouse(){
if(counter < imgSlides.length -1){
nextBtn.disabled = false;
}
else{
nextBtn.disabled = true; //Disabling the next button if the current image is the last image
}
if(counter > 0){
prevBtn.disabled = false;
}
else{
prevBtn.disabled = true; //Disabling the prev button if the current image is the first image
}
//Changing the images vertical positon based on the counter value
imgSlides.forEach(function(slide){
slide.style.transform = `translateY(-${counter*100}%)`
})
}
prevBtn.disabled = true;
