为什么不是为我工作从Twitter的引导传送带?(Why is the carousel from

2019-10-17 08:41发布

我有以下代码:

<html>
    <head>
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
          $(document).ready(function(){
            $('.carousel').carousel();
          });
        </script>
    </head>

    <body>
        <div id="welcome-carousel" class="carousel slide"><!-- class of slide for animation -->
          <div class="carousel-inner">
            <div class="item active"><!-- class of active since it's the first item -->
              <img src="img/image1.png" alt="" />
            </div>
            <div class="item">
              <img src="img/image4.png" alt="" />
            </div>
            <div class="item">
              <img src="img/image3.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
            <div class="item">
              <img src="img/image2.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
            <div class="item">
              <img src="img/image1.png" alt="" />
              <div class="carousel-caption">
                <p>Hello to the WORLD!</p>
              </div>
            </div>
          </div><!-- /.carousel-inner -->
          <!--  Next and Previous controls below
                href values must reference the id for this carousel -->
            <a class="carousel-control left" href="#welcome-carousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#welcome-carousel" data-slide="next">&rsaquo;</a>
        </div>
    </body>
</html>

这是一个index.html文件。 在同一目录下有一个名为JS,在它boostrap.min.js目录,并要求CSS一个css目录,里面有boostrap.min.css。 最后,当我下载了它,并为我的画廊的图像的文件夹调用与haphling图像TB的img了。

基本上,它看起来像这样:

当我点击箭头,图像也不会改变。 另外,我想箭头是图像中,不脱到这样的权利。

Answer 1:

它看起来好像你不是拉动bootstrap-carousel.js -这是需要使用轮换功能。

我不从你的代码知道上面如果你(在这里可供选择:建立引导定制版http://twitter.github.com/bootstrap/customize.html ),但如果你没有,你需要下载/包括(或远程调用):

<script src="js/bootstrap-carousel.js"></script>

除了缩小的基本版本。

一,你不妨考虑一下新加成/选项是: http://www.bootstrapcdn.com/这是一个伟大的想法,可能会派上用场。

你也排除了http:呼吁//ajax.googleapis.com

希望这可以帮助。



Answer 2:

使用引导旋转木马的所有元素在你的HTML和减记Jquery的这样

<script type="text/javascript">
!function ($) {
     var $window = $(window)

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


Answer 3:

在和iOS上的Safari浏览器的转盘问题,发现一个线程表达了包括.css文件被错误地忽略了包括一些浏览器浏览器的前缀。 我的错误是稍有不同(加载失败幻灯片图像)我换成我以前bootstrap.css文件与当前版本(一直在使用3.2.1更新至3.3.2),这解决了这个问题。 爱是爱一个容易解决。



文章来源: Why is the carousel from Twitter Bootstrap not working for me?