Question

我的Bootstrap轮播没有改变图片。它不会自动滑动或允许我选择另一张图片。它只显示任何给定时间的活动图像。

<!--HTML Code-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bootsrtap </title>
    <meta name="description" content="Hello World">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <!--My Links-->
    <link href="css/boostrap.mincss" rel= "stylesheet">
    <link href="css/styles.css" rel = "sylesheet">  

    <style >
    .grey{
            background-color: #000;
            padding: 20px;
    }
    </style>


</head>

<body>
<!--Presumably this is where the problem is-->
        <div id= "myCaroussel" class = "carousel"> 

            <ol class = "carousel-indicators">
                <li data-target = "myCaroussel" data-slide-to = "0" class = "active"> </li>
                <li data-target = "myCaroussel" data-slide-to = "1"> </li>
                <li data-target = "myCaroussel" data-slide-to = "2"> </li>
            </ol>

            <div class= "carousel-inner">

                <div class = "item ">
                    <img src="ottawa_option.jpg" alt = "Ottawa" class = "img-responsive">
                </div> 

                <div class = "item ">
                    <img src="toronto_option.jpg" alt = "Toronto" class = "img-responsive">
                </div>  

                <div class = "item active ">
                    <img src="vancouver_option.jpg" alt = "Vancouver" class = "img-responsive">
                </div>      

                <!--<div class= "row"> <div class= "well"> This be first Row</div>
                <div class= "row"> <div class= "well">This be second Row</div>
                <div class= "row"> <div class= "well">This be third Row</div> -->

        </div>  

     </div>



        <div class="grey">

            <div class= "container">
                <div class="well"> This</div>
            </div>  

    <footer>
        <div class="container">
            <hr>

            <p>
                <small><a href="http://facebook.com/askorama">Like me</a> On facebook</small></p>
            <p> <small><a href="http://twitter.com/wiredwiki">Ask whatever </a> On Twitter</small></p>
            <p> <small><a href="http://youtube.com/wiredwiki">Subscribe me</a> On Youtube</small>

            </p>
        </div> <!-- end container -->
    </footer>

我试图添加jQuery脚本等等，但似乎没有任何工作。这仅用于stakcoverflow目的

照片的来源不是问题，因为我可以一次或单独地显示它们，但不能作为旋转木马幻灯片。

Answer 1

将其放在<body>标记的末尾：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Answer 2

我认为你错过了添加jquery和bootstrap.js.请按照＆＃34;宏Del Valle＆＃34;的答案，或者你可以从相应的网站添加它们。

然后，如果您希望它自动滑动，则添加滑块类。

您的代码：

<div id= "myCaroussel" class= "carousel">

更新代码：

<div id="myCaroussel" class="carousel slide" data-ride="carousel">

希望它能解决你的问题。

Bootstrap Carousel不会更改图片或滑动

2 个答案: