Is there a way to slide my image to the left when I click on the right arrow of the image slider? The current behavior is that the current image hides and the next image shows up, but without any sliding animation.
$('#image-content img:first').addClass('active');
//ON CLICK ON RIGHT ARROW DISPLAY NEXT
currentIndex = $('#image-content img').index(this) + 1;
$('.right-arrow').on('click', function() {
if($('#image-content img.active').index() < ($('#image-content img').length - 1)){
currentIndex++;
$('#image-content img.active').animate({width: 'toggle'}).removeClass('active').next('#image-content img').addClass('active');
}
else {
currentIndex = 1;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active');
}
});
//ON CLICK LEFT ARROW DISPLAY PREVIOUS IMAGE
$('.left-arrow').on('click', function() {
if ($('#image-content img.active').index() > 0) {
currentIndex--;
$('#image-content img.active').removeClass('active').prev('#image-content img').addClass('active');
} else {
currentIndex = $('#image-content img').length;
$("#image-content img").removeClass("active");
$('#image-content img').eq(currentIndex - 1).addClass('active')
}
});#image-content{
height: 400px;
width: 100%;
}
#image-content img{
position: absolute;
height: auto;
width: auto;
max-height: 380px;
max-width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none
}
#image-content img.active{
display: block
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-1 text-right nav-direction">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/136304-200.png" class="img-fluid left-arrow" alt="">
</div>
<div class="col-9 text-center">
<!-- Main Images -->
<div id="image-content">
<!--(start foreach)-->
<img src="http://letssunday.com/assets/upload/product/5aa63613ea17a107011.jpg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dc88ad258479.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97d45e75220450.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97dcf94f110046.jpeg" class="img-fluid">
<img src="http://letssunday.com/assets/upload/productImageGallary/5a5da97e6268c505542.jpeg" class="img-fluid">
<!-- (end foreach)-->
</div>
<!-- End main Images-->
</div>
<div class="col-1 text-left nav-direction">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png" class="img-fluid right-arrow" alt="">
</div>
</div>I'm looking for a solution to add a left side slide animation to the current functionality of the image slider. Everything works fine except for the animation. Can anyone assist with this issue?