我正在尝试实现 Twitter Bootstrap Carousel 插件。它看起来和自动循环正确,但元素之间的滑动效果不起作用。它只是静态地用下一个替换一个元素。虽然它的功能,这是一个不太令人愉快的用户体验。想法?
<div class="span7">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/CoachellaValley.png" alt="">
<div class="carousel-caption">
<h4>Sponsor 1</h4>
</div>
</div>
<div class="item">
<img src="img/CoachellaValley2.png" alt="">
<div class="carousel-caption">
<h4>Sponsor 2</h4>
</div>
</div>
<div class="item">
<img src="img/CoachellaValley3.png" alt="">
<div class="carousel-caption">
<h4>Sponsor 3</h4>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
[...]
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script type="text/javascript">
$(function(){
$('#myCarousel').carousel();
})
</script>
最佳答案
试试这个:
删除您在文档中加载的以下所有 js 脚本:
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
并保持以下相同的顺序(jQuery 在前)
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>
我认为的问题是,除了多次加载相同的脚本文件(bootstrap js 文件已经包含所有插件,所以不需要包含最小版本(暂时保存它用于生产)或单个单独的脚本文件),由于脚本加载的顺序,您没有加载包含在 bootstrap.js 文件中的转换脚本。
关于javascript - Twitter Bootstrap 旋转木马幻灯片不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9985801/