Bootstrap Carousel Next/Prev not working

我正在使用Twitter Bootstrap Carousel，儘管我對.js不是很熟悉，不知何故，我的工作正常。Bootstrap Carousel Next/Prev not working

唯一的問題是next/prev按鈕以奇怪的方式工作。

這裏是我的臨時站點： http://tokyo-flaneur.com/dl/donner/contents/menu.html

雖然我有10張，我無法通過單擊Next按鈕到10號。在第三張圖像之後，當我點擊下一個按鈕時，圖像返回到第2號。

另外，無論我看的圖像是什麼，當我點擊prev按鈕時，它一直回到No.1。

任何人都可以幫助我或指導我走向正確的方向嗎？任何幫助，將不勝感激。

來源

2013-01-22 user1998782

您處理滑塊的下/上一個按鈕，用自己的處理程序，所以它滑到第二個元素月1日，比試圖讓next()

取代：

$("#myCarousel a").click(function(e){ 
    var index = $(this).index(); 
    //when hitting NEXT button index always 2, for PREV - 0 
    slider.carousel(index); 
    e.preventDefault(); 
});

與

$("#myCarousel .slider-pager a").click(function(e){ 
    var index = $(this).index(); 
    slider.carousel(index); 
    e.preventDefault(); 
});

在您的onpage腳本

來源

2013-01-22 02:52:49

謝謝eicto !!!非常感謝！！我不能自己解決這個問題。 – user1998782

在這種情況下「滑塊」是什麼？ – 2013-03-28 23:16:16

@dpk我不太好記，很可能它是jquery對象'＃myCarousel' –

對於未來的訪問者t Ø這個問題：

使用屬性：data-interval="false"（引導3.3.5）：自舉3

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">

這裏有其他支持的轉盤選項：

http://getbootstrap.com/javascript/#carousel-usage

早期版本：

jsFiddle Example

<div id="myCarousel" class="carousel slide text-center" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <h4>A mind-bending lecture on applied philosophy by Oxford lecturer Ravi Zacharias.</h4> 
      <br> 
      <span class="font-normal">youtube/watch?v=3ZZaoavCsYE</span> 
     </div> 
     <div class="item"> 
      <h4>Director of the Human Genome Project discusses the greatest mystery of life</h4> 
      <br> 
      <span class="font-normal">youtube/watch?v=EGu_VtbpWhE</span> 
     </div> 
    </div> 

    <a href="" class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a href="" class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
</div><!-- #myCarousel --> 

<script> 
    $(function(){ 

     $('.carousel-control').click(function(e){ 
      e.preventDefault(); 
      $('#myCarousel').carousel($(this).data()); 
     }); 

    });//END document.ready 
</script>

注：這個答案需要jQuery的，所以要確保庫加載。當然，引導程序需要jQuery，所以你應該已經引用它。

來源

2015-12-12 01:43:53 gibberish

Bootstrap Carousel Next/Prev not working

回答

相關問題