如何在 Bootstrap 中向轮播幻灯片添加/删除“上一个”和“下一个”类？

Posted 2023-02-25

【中文标题】如何在 Bootstrap 中向轮播幻灯片添加/删除“上一个”和“下一个”类？

【英文标题】：How to Add/remove 'prev' and 'next' classes to carousel slides in Bootstrap?

【发布时间】：2014-08-27 17:32:16

【问题描述】：

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

Here is the example I'm basing it off，这里是使用的 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>

有什么想法吗？

【参考方案1】：

这是一个简单的 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');
);

Demo fiddle