Question

使用最新版本并拥有基本的轮播。我已经使用了所有默认设置，但是当尝试添加或停止某些功能时，事情会中断或根本不起作用。我希望能够手动循环图像。不要让它自动循环。我想只使用next和prev按钮来循环。我在这里看了几篇文章，但解决方案无法帮助/工作。

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

Bootstrap carousel next和prev功能不起作用

2 个答案: