如何添加/删除'prev'和'接下来'类在Bootstrap中循环播放幻灯片

How to Add/remove 'prev' and 'next' classes to carousel slides in Bootstrap?

本文关键字：Bootstrap 类在 接下来 循环 幻灯片 播放 prev 添加 删除 何添加      更新时间：2023-09-26

我正试图用CSS将上一张和下一张幻灯片定位在Bootstrap.js（3.1.1版）中，但在剥离prev或next类并添加active类（取决于滑动方式）之前，Bootstrap.jsp似乎只是非常短暂地将它们添加到相邻的幻灯片中。为了定位上一张和下一张幻灯片（而不是序列中的其他幻灯片），我想将next类添加到下一张，并将"上一张"类添加到相对于当前幻灯片的上一张幻灯片，并将它们保留在那里，直到幻灯片更改：

这是我基于它的例子，这里是使用的javascript：

<script>
 $(document).ready(function() {  
     $("#myCarousel").swiperight(function() {  
          $(this).carousel('prev');  
            });  
       $("#myCarousel").swipeleft(function() {  
          $(this).carousel('next');  
   });  
});  
</script>

正确的行为如下（注意prev、active和next类的移动：

<div id="myCarousel" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
 <div class="item active">
   Slide 1
 </div>
 <div class="item next">
   Slide 2
 </div>
 <div class="item">
   Slide 3
 </div>
 <div class="item">
   Slide 4
 </div>
</div>
</div>

应该变成：

<div id="myCarousel" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
 <div class="item prev">
   Slide 1
 </div>
 <div class="item active">
   Slide 2
 </div>
 <div class="item next">
   Slide 3
 </div>
 <div class="item">
   Slide 4
 </div>
</div>
</div>

有什么想法吗？

这里有一个简单的jquery脚本，用于在每次转换后添加相应的类：

var $carousel = $('#myCarousel'),
    $carouselItems = $('.item', $carousel);
//This event is fired when the carousel has completed its slide transition.
$carousel.on('slid.bs.carousel', function (e) {
    //Reset classes
    $carouselItems.removeClass('prev next');
    //Find current slide
    var $active = $(e.relatedTarget);
    //Add corresponding classes to next and prev elements
    $active.next().addClass('next');
    $active.prev().addClass('prev');
});

演示小提琴

相关文章：