引导轮播next和prev功能不起作用 [英] 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
    });
});

推荐答案

您可以自行关联事件:

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

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

您当然也可以使用data-slide，这取决于您要执行的操作.这样的事情与上面的事情一样.

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

这篇关于引导轮播next和prev功能不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！