I have a carousel made with bootstrap 5 , which works fine.
I placed some buttons so that, when clicking on them, the slide changes (as happens with the indicators).
On the first slide all the buttons work fine, but when I switch to the 2nd slide it doesn't work anymore.
This is the main structure of the carousel:
<div class="car carousel-item active pt-lg-5">
<div class="overlay-image" style="background-image:url(<?php echo get_template_directory_uri() . '/img/SF-yellowmovil-wave.png'; ?>);"></div>
<div class="row col-lg-6 cont-nave">
<button type="button" id="myBtn" class="">diapositiva1</button>
<button type="button" id="myBtn1" class="">diapositiva2</button>
<button type="button" id="myBtn2" class="">diapositiva3</button>
<button type="button" id="myBtn3" class="">diapositiva4</button>
<button type="button" id="myBtn4" class="">diapositiva5</button>
<button type="button" id="myBtn5" class="">diapositiva6</button>
<p class="col-lg-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet feugiat ultrices. In vestibulum auctor justo in malesuada.
Ut sit amet mauris in justo tristique porttitor. Vivamus egestas purus sit amet iaculis euismod. Donec sagittis malesuada vestibulum.
Vestibulum ultricies pretium feugiat. Nunc mattis mauris vel pharetra porta. Integer ornare porttitor tellus vitae dapibus.</br></br>
Phasellus ultricies odio nibh, non facilisis tellus feugiat a.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<div class="car carousel-item pt-lg-5">
<div class="overlay-image" style="background-image:url(<?php echo get_template_directory_uri() . '/img/SF-bluemovil-wave.png'; ?>);"></div>
<div class="row col-lg-6 cont-nave">
<button type="button" id="myBtn" class="">diapositiva1</button>
<button type="button" id="myBtn1" class="">diapositiva2</button>
<button type="button" id="myBtn2" class="">diapositiva3</button>
<button type="button" id="myBtn3" class="">diapositiva4</button>
<button type="button" id="myBtn4" class="">diapositiva5</button>
<button type="button" id="myBtn5" class="">diapositiva6</button>
<p class="col-lg-10">Pellentesque condimentum, sem in lobortis consectetur, orci sapien pharetra libero, quis convallis velit odio et nunc.
Vestibulum bibendum gravida metus at tempus. Morbi ultrices lectus eget ipsum laoreet pretium. Quisque vitae iaculis odio.
Integer venenatis ornare leo, maximus euismod nulla interdum eget. Nam in mollis sem. Pellentesque nec sollicitudin sem, a consectetur nibh.
Etiam eget velit et leo rutrum feugiat.</br></br>
Sed pulvinar sagittis nulla eu mattis. Suspendisse non tincidunt massa. Vestibulum convallis facilisis tortor.
</p>
</div>
</div>
Here is the Jquery with the function to change the slide when clicking on one of the buttons:
<script>
jQuery(document).ready(function() {
jQuery("#myBtn").click(function() {
jQuery("#mycarousel").carousel(0);
});
jQuery("#myBtn1").click(function() {
jQuery("#mycarousel").carousel(1);
});
jQuery("#myBtn2").click(function() {
jQuery("#mycarousel").carousel(2);
});
jQuery("#myBtn3").click(function() {
jQuery("#mycarousel").carousel(3);
});
jQuery("#myBtn4").click(function() {
jQuery("#mycarousel").carousel(4);
});
jQuery("#myBtn5").click(function() {
jQuery("#mycarousel").carousel(5);
});
});
</script>
You must understand that the identifier
id
can only be used once, if you put the sameid
in more than one element, you will only be able to select the first element, to avoid this you must change it to a class, in the following way:Why don't you use the default BootStrap carousel, just change the images I put in it and try it