We are go to see how to create animated image slider using javascript. This type animated image slider using on your website for gallery image, banner images etc... This slider concept using html and css, javascript. Easy to understand the coding. Demo video available.
Code:
Html:
<div class="space"></div>
<div class="container" style="height: 50px">
<div class="row">
<div class="col-md">
<button id="prev">Prev</button>
<button id="next">Next</button>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="m-auto on-screen image-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlA7gxdPoghL0-IU-oZRAlaTq-QjQ9crem8g&usqp=CAU" class="img-fluid" alt="">
</div>
<div class="m-auto out-screen image-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlA7gxdPoghL0-IU-oZRAlaTq-QjQ9crem8g&usqp=CAU" class="img-fluid" alt="">
</div>
<div class="m-auto out-screen image-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlA7gxdPoghL0-IU-oZRAlaTq-QjQ9crem8g&usqp=CAU" class="img-fluid" alt="">
</div>
<div class="m-auto out-screen image-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlA7gxdPoghL0-IU-oZRAlaTq-QjQ9crem8g&usqp=CAU" class="img-fluid" alt="">
</div>
<div class="m-auto out-screen image-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlA7gxdPoghL0-IU-oZRAlaTq-QjQ9crem8g&usqp=CAU" class="img-fluid" alt="">
</div>
</div>
<div class="container">
</div>
</div>
Css:
body{
background-color:black;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
padding: 0;
overflow: hidden;
}
.space{height: 100px;}
.container-fluid{
height: 500px;
position: relative;
}
.centered{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 70vh;
}
.image-container{
transform: rotate(0deg);
max-width: 600px;
border: 10px solid #fff;
border-bottom: 50px solid #fff;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%);
transition: 2s;
}
.out-screen{
transform: rotate(90deg);
left: -700px;
}
.come-in{
transform: rotate(0deg);
top: 0%;
left: 50%;
transform: translate(-50%);
z-index: 10;
}
#prev, #next{
position: absolute;
background: #F39C12;
border: none;
color: #fff;
padding: 10px;
}
#prev{
left: 0;
}
#next{
right: 0;
}
@media screen and (max-width: 500px){
.image-container{width: 100%;}
}
Javascript:
$('#next').click(function (){
if($('.on-screen').next().length == 0){
$('.on-screen').removeClass('on-screen come-in').addClass('out-screen');
$('.image-container').first('image-container').removeClass('out-screen').addClass('come-in on-screen');
}
else
$('.on-screen').removeClass('on-screen come-in').addClass('out-screen').next('.image-container').addClass('come-in on-screen');
});
$('#prev').click(function (){
if($('.on-screen').prev().length == 0){
$('.on-screen').removeClass('on-screen come-in').addClass('out-screen');
$('.image-container').last('image-container').removeClass('out-screen').addClass('come-in on-screen');
}
else
$('.on-screen').removeClass('on-screen come-in').addClass('out-screen').prev('.image-container').addClass('come-in on-screen');
});
0 Comments