I am currently working on a Bootstrap 4 carousel and using Jquery to fetch and display images. The images are named from 1.jpg to 72.jpg. Everything seems to be working fine except that when I click on an image, the indicator thumbnails highlight the wrong image.
For example, if I click on image 2, then image 3 is highlighted instead of image 2.
I have been trying to figure out why this issue is happening without much success.
If you want to take a look at my code, here is a link to the fiddle.
To fetch and append the images using Jquery, I use the following code:
$(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 structure for the carousel is quite 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>
And here is the CSS used for styling the carousel:
#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;
}