如何在Bootstrap中添加/刪除'prev'和'next'類到傳送帶幻燈片？

Question

我試圖在Bootstrap Carousel中使用CSS來定位prev和下一張幻燈片，但Bootstrap.js（版本3.1.1）似乎只是在剝離它們之前僅向相鄰幻燈片添加prev或next類，然後添加active類（取決於你刷卡的方式）。爲了放置prev和下一張幻燈片（而不是序列中的其他幻燈片），我想將next類添加到以下幻燈片中，並將'prev'類添加到相對於當前幻燈片的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> 

有什麼想法？

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