Bootstrap Carousel Next/Prev not working
Bootstrap Carousel Next/Prev not working
我正在使用Twitter Bootstrap Carousel,虽然我对。js不太熟悉,但不知怎的,我得到了很好的工作。
唯一的问题是next/prev按钮的工作方式很奇怪。
这是我的临时网站:http://tokyo-flaneur.com/dl/donner/contents/menu.html
虽然我有10张图片,但我不能通过点击下一个按钮到达第10号。在第三张图片之后,当我点击next按钮时,图片又回到了第二张。
同样,无论我在看什么图片,当我点击上一按钮,它会一直回到第一。
谁能帮我或给我指个正确的方向?您使用自己的处理程序处理滑块的next/prev按钮,因此它首先滑动到第二个元素,然后尝试使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();
});
对于将来访问此问题的人:
使用属性data-interval="false"
(Bootstrap 3.3.5):
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
以下是Bootstrap 3中其他支持的carousel选项:
http://getbootstrap.com/javascript/carousel-usage
早期版本:
jsFiddle示例
<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,所以确保库被加载。当然,bootstrap需要jQuery,所以你应该已经有了它的引用
相关文章:
- $rootScope not working
- jQuery document.ready not working
- Javascript getElementsByTagName not working?
- JQuery.val( ) not working
- Tomcat websocket is not working
- Javascript JSON.parse not working
- NodeJS Multer is not working
- Regex not working
- Ember run.debounce not working
- AngularJs 1 not working
- document.getElementById.style.backgroundImage not working
- Rxjs5, distinct() is not working
- createOscillator noteOn not working
- Javascript - .getHours() not working
- Javascript setTimeout not working | onkeydown
- MongoDB $pull not working
- Express router.use not working
- JSONP not working
- window.opener not working in chrome & IE
- Backbone + RequireJS: Collection.each() is not working