CODEWITHSUNDEEP
htmltwitter-bootstrap
lychee
lychee

Reputation: 1851

Twitter Bootstrap carousel controls aren't working

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.

Upvotes: 1

Views: 580

Answers (1)

OlivMertens
OlivMertens

Reputation: 134

You have mistake on the carousel, you forgot the H letter on Glyphicon

 <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>

Upvotes: 1

Related Questions