Question

我正在尝试实现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">&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>

Answer 1

试试这个：

删除您在文档中加载的所有以下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文件中包含的转换脚本，因为脚本的加载顺序。

Answer 2

经过一段时间的努力，我找到了solution - 你只需要包含

自举-transition.js

并且幻灯片动画将起作用。

Answer 3

交易是我使用class="carousel"用于轮播容器和

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

它仅适用于左/右键单击并且工作得很好（但只有一次）。

如果使用class="carousel slide" 和

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

然后轮播切换，但没有幻灯片动画效果。

Answer 4

你的守则是正确的.. 在我的系统中，此代码工作正常..

没有课程的定义＆＃34; slide＆＃34;在Bootstrap 3 ..但没有＆＃34; Slide＆＃34;类，轮播图像会随着任何动画效果而改变。

在代码中添加此脚本

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

检查Bootstrap CSS＆amp; JS代码中的参考代码.. 并检查参考文件的顺序

您可以按照以下顺序：

bootstrap.css
自举-theme.css
的jquery-1.9.1.js
bootstrap.js

脚本块无法使用JQ库。因此正确添加JQ库文件..

并确保在脚本工作之前加载JQ文件。为此您可以在页面顶部添加引用

Answer 5

尽管这个问题得到了成功解答 - 我来到这里寻找类似问题的答案。

我在旋转木马上的第一个项目是向左滑动，就像正常一样，但第二个项目不在它后面。一旦第一个项目离开屏幕，第二个项目就会出现，而不是滑入。然后它会消失，第一个项目将正确滑入。

如果您遇到此问题，请检查您是否有位置：亲属;在.item div。

我这样添加：

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

原来，这会让事情变得混乱。删除位置：相对;解决了这个问题。现在滑动是顺畅和正确的。

Twitter Bootstrap Carousel Slide不起作用

5 个答案: