我的Bootstrap轮播课程无效

时间:2017-03-20 11:32:12

标签: twitter-bootstrap

我创建了一个旋转木马引导程序,但它无法正常工作。旋转木马是滑块类型,2个图像将嵌入到" img"标签。如果有问题请帮忙。谢谢。



<!DOCTYPE html>
<html lang="en">
<head>
  <title>TATTOO</title>
    <meta charset="utf-8">
    <meta class="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>




<div class="container-fluid">
	<div class="row">    
    <div class="col-xs-12" id="gifdivision">
      <!-- adding the carousel slider-->
      <div class="carousel slide" id="myslider" data-ride="carousel">
          <div class="item active">
              <img src="#some image here">
              <div class="carousel-caption"><h2>caption here 1</h2></div><!--this is the carousel caption-->
          </div>
          <div class="item">
              <img src="#some image here">
              <div class="carousel-caption"><h2>caption here        2</h2></div><!--this is the carousel caption-->
          </div>
      </div><!-- this is the carousel slide div--> 
    </div><!-- end of col-xs-12 -->
  </div><!-- end of 1st row-->
 </div><!--end of container-->
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

您缺少jQuery,并且轮播标记错误。

Bootstrap 3.x Carousel需要carousel-inneritem ...

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" id="gifdivision">
            <!-- adding the carousel slider-->
            <div class="carousel slide" id="myslider" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="//placehold.it/1200x400" class="center-block">
                        <div class="carousel-caption">
                            <h2>caption here 1</h2></div>
                        <!--this is the carousel caption-->
                    </div>
                    <div class="item">
                        <img src="//placehold.it/1200x400" class="center-block">
                        <div class="carousel-caption">
                            <h2>caption here        2</h2></div>
                        <!--this is the carousel caption-->
                    </div>
                </div>
            </div>
            <!-- this is the carousel slide div-->

        </div>
        <!-- end of col-xs-12 -->
    </div>
    <!-- end of 1st row-->
</div>
<!--end of container-->

http://www.codeply.com/go/6koiOwGY1U