Question

我有一个无效的Bootstrap 3旋转木马。可能是一个JS问题，但我不是JS向导，所以我不知道。

我在bootstrap.js之前加载了jquery.js，这不是问题所在。有人可以帮帮我吗？ THX

<html>
<head>
<title>Belgian Popline 2013</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

<!--carousel--> 
<script>
$(document).ready(function(){
    $('#carousel').carousel({
        interval: 3000
    }); 
});
</script>

</head>
<body>
<!--wrapper-->
<div id="wrap"> 

    <!--container-->
    <div class="container"> 

        <!--nav-->
        <ul class="nav">
            <li class="logo"><a href=""><img src="img/bpl.png"></a></li>
            <li><a href="">HOME</a></li>
            <li><a href="">WAAROM?</a></li>
            <li><a href="">BIO'S</a></li>
            <li><a href="">DOWNLOADS</a></li>
            <li><a href="">VORIGE EDITIES</a></li>
            <li><a href="">JOETZ</a></li>
            <li class="worst"><img src="img/worst.png"></li>
        </ul>

        <!--content-->
        <div class="row"> 

            <!--right col-->
            <div class="col-md-5"> 
                <!--carousel-->
                <div id="carousel" class="carousel slide"> 
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel" data-slide-to="1"></li>
                        <li data-target="#carousel" data-slide-to="2"></li>
                        <li data-target="#carousel" data-slide-to="3"></li>
                        <li data-target="#carousel" data-slide-to="4"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active"><img src="img/sofie.jpg" alt="Sofie Dumont"></div>
                        <div class="item"><img src="img/sofie.jpg" alt="Kobe Desramaults"></div>
                        <div class="item"><img src="img/jason.jpg" alt="Jason Blanckaert"></div>
                        <div class="item"><img src="img/wim.jpg" alt="Wim Ballieu"></div>
                        <div class="item"><img src="img/olly.jpg" alt="Olly Ceulenaere"></div>
                    </div>

                    <!-- Controls --> 
                    <a class="left carousel-control" href="#carousel" data-slide="prev"><span class="icon-prev"></span></a>
                    <a class="right carousel-control" href="#carousel" data-slide="next"><span class="icon-next"></span></a>
                </div>
            </div>
        </div>
    </div>

    <!--end wrapper--> 
</div>

<!--footer-->
<div id="footer"> 
    <!--container-->
    <div class="container">
        <p>Test</p>
    </div>
    <!--end footer--> 
</div>

<script src="//code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script>

</body>
</html>

Answer 1

你的js或css会有问题。所以试试CDN版本。

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

并且

<script src="//code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

旋转木马不工作

1 个答案: