In this code, scrolling is not working. Around 25-30 (image count is not fixed )images will be added from the admin panel each week that will replace the previous images and that will be displayed here. only the latest images will be visible in front Images get properly fetched but scrolling is not working. I think there is some issue in the javascript code. Please help me to resolve it.
/*
Carousel
*/
$('#carousel-example').on('slide.bs.carousel', function(e) {
/*
CC 2.0 License Iatek LLC 2018 - Attribution required
*/
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 5;
var totalItems = $('.carousel-item').length;
if (idx >= totalItems - (itemsPerSlide - 1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i = 0; i < it; i++) {
// append slides to end
if (e.direction == "left") {
$('.carousel-item').eq(i).appendTo('.carousel-inner');
} else {
$('.carousel-item').eq(0).appendTo('.carousel-inner');
}
}
}
});<!-- Cartoon Carousel -->
<section>
<div class="cartoon">
<div class="top-content">
<div class="container-fluid">
<div id="carousel-example" class="carousel slide" data-ride="carousel">
<!-- slides -->
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<?php
if(sizeof($cartoons_category_data) > 0){
for($i = 0; $i< count($cartoons_category_data) ; $i++){
?>
<div class="carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">
<img src="<?php echo base_url('assets/uploads/library/'.$cartoons_category_data[$i]); ?>" class="img-fluid mx-auto d-block" alt="img1">
</div>
<?php
} //for
} ?>
</div>
<a class="carousel-control-prev" href="#carousel-example" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true" style="background-color: #ffa500;
padding: 15px;"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-example" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true" style="background-color: #ffa500;
padding: 15px;"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>
