Twitter Bootstrap旋转木马幻灯片不起作用

问题描述：

我试图实现Twitter Bootstrap旋转木马插件。它看起来和自动循环正确，但项目之间的幻灯片效果不起作用。它只是静态替换下一个项目。虽然它是功能性的，但这还不够令人满意的用户体验。思考？Twitter Bootstrap旋转木马幻灯片不起作用

<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">&lsaquo;</a> 
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</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>

你正在测试什么浏览器？ – 2012-04-03 01:25:11

Chrome beta channel – 2012-04-03 02:28:10

对读者的警告：确保您还将类“幻灯片”添加到旋转木马div，否则您将遇到相同的症状（图像更改但不是动画）。在这个线程中发布并解决了类似的问题（请参阅第二条评论）：http://stackoverflow.com/questions/10660718/twitter-bootstrap-carousel-not-sliding – 2016-04-30 14:09:00

答

试试这个：

删除您的所有文档中加载以下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>

我相信的问题是，除了多次加载相同的脚本文件s（bootstrap js文件已包含所有插件，因此不需要包含min版本（现在保存用于生产）或单个单独的脚本文件），则不会加载bootstrap.js中包含的转换脚本文件，因为你的脚本加载顺序的。

就是这样。谢谢。 – 2012-04-07 17:31:30

答

新政是，如果我使用class="carousel"的转盘容器和

$('.carousel').carousel('slide',{interval:1000});

它仅适用于一个左\点击右键，工作非常细（但只有一次）。

如果使用class="carousel slide" 和

$('.carousel .slide').carousel('slide',{interval:1000});

然后转盘开关但没有滑动的动画效果。

'$（'。carousel .slide'）'与$（'。carousel.slide'）'（不带空格）不一样。后者会工作，而前者只会在'class = carousel'的子节点上定位'class = slide' – 2013-01-17 16:49:51

答

与此挣扎了一会儿后，我已经找到了solution - 你只需要包括

引导-transition.js

和幻灯片动画会工作。

Andres Ilich的回答表明'bootstrap-transition.js'代码实际上已经包含在main' bootstrap.js'。如果这是真的，你的答案会变得不正确 - 不需要额外加载'bootstrap-transition.js'文件。 – trejder 2013-09-25 13:09:35

这是答案，我不知何故在bootstrap.js中被注释掉了。：d – Michael 2015-08-14 11:49:30

答

你的代码是正确的.. 在我的系统的代码工作正常..

有没有“幻灯片”类的定义为引导3..But类“滑动”，旋转木马图像将与改变任何动画效果..

在你的代码

<script> 
    $(document).ready(function() { 
     $('.carousel').carousel(); 
    }); 
</script>

检查引导CSS & JS参考你的代码.. 添加这个脚本，并检查参考f的顺序尔斯

你可以按照这个顺序： -

bootstrap.css
引导-theme.css
jQuery的1.9.1。JS
bootstrap.js

脚本块不会出JQ Library..So工作添加JQ库文件正确..

，并确保JQ文件中的脚本工作之前加载..为此，您可以在页面顶部添加参考

答

即使此问题已成功回答 - 我来到这里寻找类似问题的答案。

我在转盘上的第一件物品像往常一样向左滑动，但第二件物品不在其后面。一旦第一个项目离开屏幕，第二个项目就会出现，而不是滑入。然后它将消失，并且第一个项目将正确滑入。

如果您遇到此问题，请检查您没有位置：relative;在.item div上。

我补充说，像这样：

.carousel-inner > .item { 
    position:relative; 
    height:495px; 
}

原来，食堂的事情了。移除位置：相对;解决了这个问题。现在滑动是平稳和正确的。

Twitter Bootstrap旋转木马幻灯片不起作用

相关推荐