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

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

Answer 2

我在评论中粘贴代码时遇到了一些困难（新手:)），但我接受了 Lucuma 的帖子并添加了一些代码来防止上一个和下一个链接作为内联页面锚点工作。使用下面的代码，您可以阻止这种情况的发生，但仍然可以像您想要的那样向后/向前滑动。

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