jquery - Bootstrap 轮播下一个和上一个功能不起作用

Question

使用最新版本并具有基本的轮播。我已经让它可以使用所有默认设置，但是当尝试添加或停止某些功能时，事情会中断或根本不起作用。我希望能够手动循环浏览图像。不希望它自动循环。我只想使用下一个和上一个按钮来循环。我在这里读过一些帖子，但解决方案不起作用。

<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 1

您可以自己连接事件:

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

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

您当然也可以使用data-slide，这取决于您想要做什么。像这样的东西，其作用与上面相同。

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

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