Twitter Bootstrap轮播控件不起作用

Question

It seems that everything is ok, but the carousel controls are not working . 似乎一切正常，但轮播控件不起作用 。 When I press on the circle, nothing changes. 当我按圆圈时，没有任何变化。

<hmtl>
<style>
    .ali{
        width:170px;
        text-align:center;
    }
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<body>
    <div class="container" id="main">
        <div class="navbar navbar-inverse">
            <ul class="nav navbar-nav">
                <li class="ali"><a href="#">Page 1</a></li>
                <li class="ali"><a href="#">Page 2</a></li>
                <li class="ali"><a href="#">Page 3</a></li>
                <li class="ali"><a href="#">Page 4</a></li>
                <li class="ali"><a href="#">Page 5</a></li>
                <li class="ali"><a href="#">Page 6</a></li>
            </ul>
        </div>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#MyCarousel" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                <div class="item active">   
                    <img src="http://newartcolorz.com/images/lens-wallpaper/kartandtinki1_lens-wallpaper_03.jpg">
                </div>

                <div class="item">
                    <img src="http://images.tutorvista.com/cms/images/95/concave-lens.png" alt="Lens">
                </div>
            </div>
            <!-- start of carousel controls that are not working -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>  <!-- end of carousel inner -->
    </div> <!-- end of carousel -->
    <footer>
    </footer>
</body>

I've looked up from the bootstrap documentation page and the carousel controls are identical. 我从引导程序文档页面中查找，并且轮播控件相同。

Answer 1

You have mistake on the carousel, you forgot the H letter on Glyphicon 您在转盘上有错误，忘记了Glyphicon上的H字母

 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>

Next 下一个

like that 像那样

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <script> $( document ).ready(function(){ $('#mycarousel').carousel(); });</script> <style> .ali{ width:170px; text-align:center; } </style> <div class="container" id="main"> <div class="navbar navbar-inverse"> <ul class="nav navbar-nav"> <li class="ali"><a href="#">Page 1</a></li> <li class="ali"><a href="#">Page 2</a></li> <li class="ali"><a href="#">Page 3</a></li> <li class="ali"><a href="#">Page 4</a></li> <li class="ali"><a href="#">Page 5</a></li> <li class="ali"><a href="#">Page 6</a></li> </ul> </div> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placekitten.com/300/500"> </div> <div class="item"> <img src="http://placekitten.com/300/500" alt="Lens"> </div> </div> <!-- start of carousel controls that are not working --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- end of carousel inner --> </div> <!-- end of carousel --> <footer> </footer> </body> </html>

Twitter Bootstrap轮播控件不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-05-10 12:31:33

Twitter Bootstrap轮播控件不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-05-10 12:31:33

解决方案1
1 已采纳 2015-05-10 12:31:33