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

回答

相关问题