Question

我有一个无法使用的Bootstrap Carousel，我搜索了其他Bootstrap轮播线程，似乎无法找到答案。通常，这里的大多数问题的答案是jQuery库未正确链接，或者根本没有链接，我认为我的。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<header>
<nav class ="navbar navbar-default" role = "navigation">
    <div class= "container">
        <div class = "navbar-header">
            <a class = "navbar-brand" href="#featured"> <span class="subhead">Wisdom Pet Medicine</span></a>
        </div>
        <ul class = "nav navbar-nav navbar-right">
            <li><a href="#featured">Home</a></li>
            <li><a href="#mission">Mission</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#staff">Staff</a></li>
            <li><a href="#testimonials">Testimonials</a></li>
        </ul>     
    </div> 
</nav> <!--main nav-->

<div class= "carousel slide" data-ride= "carousel" id = "featured">
    <div class="carousel-inner">
        <div class="item active"><img src= "img/carousel-lifestyle.jpg" alt="lifestyle"></img></div>
        <div class="item"><img src= "img/carousel-exoticanimals.jpg" alt="animals"></img></div>
        <div class="item"><img src= "img/carousel-fish.jpg" alt="fish"></img></div>
        <div class="item"><img src= "img/carousel-mission.jpg" alt="mission"></img></div>
        <div class="item"><img src= "img/carousel-stateoftheart.jpg" alt="motto"></img></div>
        <div class="item"><img src= "img/carousel-vaccinations.jpg" alt="vaccine"></img></div>
    </div> <!-- Wrapper for slides -->
    <a class ="left carousel-control" href= "#featured" role = "button" data-slide ="prev"><span class= "glyphicon glyphicon-chevron-left"></span></a>
    <a class ="right carousel-control" href= "#featured" role = "button" data-slide ="next"><span class= "glyphicon glyphicon-chevron-right"></span></a>
</div> 
</div><!-- carousel-->
</div>
    </header>
    <script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
    </body>
    </html>

我也有一些CSS，它可能没有关联，但我会包括它：

body {
    font-size: 1.5em;
    font-weight:200;

}
.navbar {
    border-radius: none;
}

.navbar-nav {
    padding-right: 20px; 
}

.navbar-header>a {
    font-size:1.2em;
    font-weight:150;
    color: black !important;
}


.navbar-nav>li>a:hover, .navbar-nav>li>a:focus {
    transition: all 0.5s ease 0s;
    color: green !important;

}

.carousel {
    position:relative;
    top:-20px;
}

Answer 1

您需要使用不同版本的jQuery（您使用v1.8.3），从最低版本v1.9.1开始。

如果使用CDN，我建议您查看其中一个。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

或

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

或

CDNjs

我的Bootstrap Carousel没有前进，也没有自动运行

1 个答案: