Question

我无法让Bootstrap轮播工作。我查看了所有帖子，复制了所有的例子，没有任何作用。以下是我的代码。当我单击下一个按钮时，没有任何反应，它不会自动前进。缺少什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/site.css" type="text/css" media="screen,projection">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


</head>
<body>
    <div class="container">



        <div class="row">
            <div class="span12">
                <div id="myCarousel" class="carousel slide">
                    <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">

                        <div class="item active">
                            <img src="img/img1.png" alt="">
                        </div>



                        <div class="item">
                            <img src="img/img2.png" alt="">
                        </div>


                    </div>

                    <!-- Carousel nav -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                </div>
            </div>

        </div>


    </div>

</body>
</html>


<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script>
    $(document).ready(function () {
        $('.carousel').carousel({
            interval: 2000
        })
    });
</script>

Answer 1

几个星期前，我自己也遇到了同样的问题，我记得我的问题是什么，我希望你和我当时的情况一样！

在创建自定义引导程序包时，您必须同时包含“过渡”和“轮播”JS插件，我猜您只检查了“轮播”。

如果您替换此行：

<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

通过这些，它应该工作。

<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script>

我将您的代码复制/粘贴到本地文件，我将链接更改为在线资源的资源，这对我有用。这是总文件，以防我以前的评论不清楚：

<!DOCTYPE html>
<html lang="en">
<head>
    <!--<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <!--<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">-->
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <link rel="stylesheet" href="css/site.css" type="text/css" media="screen,projection">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="myCarousel" class="carousel slide">
                    <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">
                        <div class="item active">
                            <img src="http://www.nasa.gov/images/content/662916main_image_2292_800-600.jpg" alt="">
                        </div>
                        <div class="item">
                            <img src="http://www.nasa.gov/images/content/200370main_rs_image_feature_827_800x600.jpg" alt="">
                        </div>
                    </div>
                    <!-- Carousel nav -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<!--<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script>

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

Answer 2

这是一个工作示例，看看它可能对你有用，因为它对我来说非常适合。

        <div class="carousel slide" id="theCarousel" data-interval="3000">
        <ol class="carousel-indicators">
        <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#theCarousel" data-slide-to="1"></li>
        <li data-target="#theCarousel" data-slide-to="2"></li>
        </ol>

            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%201.JPG" alt="1" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">Resting In Style</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar%202.JPG" alt="2" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">The Dude Look</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
                <div class="item ">
                    <img src="http://www.ansupalake.in/gallery/tapan%20kumar.JPG" alt="3" class="img-responsive" />
                    <div class="carousel-caption">
                         <h4 class="text-left">How z It??</h4>

                        <p class="text-left">Hi Everybody what's going on.....</p>
                    </div>
                </div>
            </div> 
            <a href="#theCarousel" class="carousel-control left" data-slide="prev">
                    <span class="icon-prev"></span>
                </a>
            <a href="#theCarousel" class="carousel-control right" data-slide="next">
                    <span class="icon-next"></span>
                </a>            
    </div>

使用jsfiddle输出查看现场演示。 Carousel Image Slider In Twiter Bootstrap 3

Bootstrap轮播没有前进

2 个答案: