我的旋转木马不能正常工作3

时间:2014-02-03 10:45:56

标签: html css twitter-bootstrap twitter-bootstrap-3

    <!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.7.1.min.js"></script>
        <script src="js/vendor/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div class="container" style="margin-top:20px;">
        <div class="col-md-4">
    <ul class="nav nav-pills nav-stacked">
  <li class="active">
  <a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
        </div>
        <div class="col-md-8">
            <div id="mycar" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                <li data-target="#mycar" data-slide-to="0" class="active"></li>
                <li data-target="#mycar" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item-active">
                    <img src="slider/demo-slider-1.jpg">
                    </div>
                    <div class="item">
                    <img src="slider/image-slider-2.jpg">

                     </div>
                    </div>
<a class="left carousel-control" href="#mycar" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#mycar" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
            </div>


        </div>


    </body>
</html>

这是我的完整代码,发生的问题是旋转木马幻灯片功能不正常。当第一次加载页面时,图像滑块工作意味着当我们单击滑块箭头(它们中的任何一个天气向左或向右)时,它工作并且图像确实发生变化。但在第一次尝试后,它不会改变或滑动图像。其他问题是滑动指示器链接也不起作用。

1 个答案:

答案 0 :(得分:0)

似乎有些事情是矛盾的。建立&#34; mycar&#34; Div如下

<div id="mycar" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#mycar" data-slide-to="0" class="active"></li>
                <li data-target="#mycar" data-slide-to="1"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                     <img src="slider/demo-slider-1.jpg">
                </div>
                <div class="item">
                    <img src="slider/demo-slider-2.jpg">
                </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#mycar" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control"
                    href="#mycar" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
                    </span></a>
        </div>

希望这有帮助..如果它确实帮助我赢得声誉..或者如果您寻求更多帮助,请告诉我。

相关问题