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
    });
});

回答1:

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');
});

回答2:

I had some difficulty pasting code in a comment (newbie :) ) but I took Lucuma's post and added some code to prevent both previous and next links from working as a inline page anchor. Using the code below, you stop that from happening but still slide backwards/forwards like you wanted.

// Fixes the prev/next links of the sliders
$('.carousel-control.left').click(function(e) {
  e.stopPropagation();
  $('.js-carousel').carousel('prev');
  return false;
});

$('.carousel-control.right').click(function(e) {
  e.stopPropagation();
  $('.js-carousel').carousel('next');
  return false;
});

来源：https://stackoverflow.com/questions/15819943/bootstrap-carousel-next-and-prev-function-not-working

标签

jquery

twitter-bootstrap

carousel