Question

我试图将带有CSS的Bootstrap Carousel中的prev和下一张幻灯片定位，但Bootstrap.js（版本3.1.1）似乎只是非常短暂地添加了prev或{{1}在剥离它们并添加next类（取决于您滑动的方式）之前，将类添加到相邻幻灯片中。为了定位上一张幻灯片和下一张幻灯片（而不是序列中的其他幻灯片），我想将active类添加到下面的幻灯片中，然后点击“上一页”。将相对于当前幻灯片的prev幻灯片分类并保持在那里直到幻灯片更改：

Here is the example I'm basing it off，这是使用的javascript：

next

正确的行为如下（请注意<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>

有什么想法吗？

Answer 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

如何在Bootstrap中添加/删除'prev'和'next'类到carousel幻灯片？

1 个答案: