jfrosty jfrosty - 7 months ago 190
Javascript Question

Bootstrap carousel next and prev function not working

Using latest version and have the basic carousel. I've got it working with all the default settings, however when trying to add or stop certain functions, things break or don't work at all. I want to be able to manually cycle through the images. Don't want it to auto cycle. I want to just use the next and prev buttons to cycle through. I've read a few post on here but the solutions don't work help/work.

<div id="myCarousel" class="carousel slide">

<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<ul class="thumbnails">
<li>Img</li>
<li>Img</li>
<li>Img</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li>Img</li>
<li>Img</li>
<li>Img</li>
</ul>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

$('#myCarousel').each(function() {
$(this).carousel({
interval: false
});
});

Answer

You can wire the events up yourself:

$('.carousel-control.left').click(function() {
  $('#myCarousel').carousel('prev');
});

$('.carousel-control.right').click(function() {
  $('#myCarousel').carousel('next');
});

You can of course use the data-slide as well just depends on what you want to do. Something like this which does the same as above.

$('a[data-slide="prev"]').click(function() {
  $('#myCarousel').carousel('prev');
});

$('a[data-slide="next"]').click(function() {
  $('#myCarousel').carousel('next');
});
Comments