I'm making a BS4 carousel.
I'm using Jquery to fetch images to display.
The images is named 1.jpg - 72.jpg
Everything works fine except the indicator thumbnails highlights wrong image on click.
If image 2 is clicked image 3 is highlighted etc.
I can't find out why this is happening.
I use this Jquery
to fetch the images and append them to a div.
$(document).ready(function(){
for(var j = 1; j < 72; j++) {
$('<div class="carousel-item"><img src=" ./images/'+ j+'.jpg " width="100%">
</div>').appendTo('.carousel-inner');
$('<li data-target="#carousel" data-slide-to="'+j+'"><img src=" ./images/'+ j+'.jpg " class="img- fluid"></li>').appendTo('.carousel-indicators')
console.log(j);
}
$('.carousel-item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel').carousel({
pause: true,
interval: true,
});
});
The HTML is just basic.
<div id="carousel" class="carousel slide" data-interval="false">
<div class='carousel-outer'>
<div class="carousel-inner"></div>
<a class="carousel-control-prev" href="#carousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousel" data-slide="next"> <span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- Indicators -->
<ol class="carousel-indicators"></ol>
</div>
The css
#carousel {
margin: 20px auto;
max-height:658px;
width: 1024px;
}
#carousel .carousel-indicators {
flex-wrap: wrap;
justify-content: center;
padding: 0 15px;
width: 100%;
position: static;
right: 0;
bottom: 0;
margin-right: 0;
margin-left: 0;
}
#carousel .carousel-indicators li {
background-color: transparent;
-webkit-border-radius: 0;
border-radius: 0;
display: inline-block;
height: auto;
margin: 0 !important;
width: auto;
}
#carousel .carousel-indicators li img {
width: 50px;
display: block;
opacity: 0.9;
}
#carousel .carousel-indicators li.active img {
opacity: 1;
}
#carousel .carousel-indicators li:hover img {
opacity: 0.75;
}
#carousel .carousel-outer {
position: relative;
}
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
display: block !important;
}
Most probably it happens because of the loop starting from 1 instead of 0.
A possible fix would be to change the data-slide-to
attribute's value to j - 1
instead of j
:
$(document).ready(function(){
for(var j = 1; j < 72; j++) {
$('<div class="carousel-item"><img src=" ./images/'+ j +'.jpg " width="100%"></div>').appendTo('.carousel-inner');
$('<li data-target="#carousel" data-slide-to="'+ (j - 1) +'"><img src=" ./images/'+ j +'.jpg " class="img- fluid"></li>').appendTo('.carousel-indicators')
console.log(j);
}
$('.carousel-item').first().addClass('active');
$('.carousel-indicators > li').first().addClass('active');
$('#carousel').carousel({
pause: true,
interval: true,
});
});