CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
TechnoCorner
TechnoCorner

Reputation: 5175

Bootstrap slideshow (carousel) indicators not working

I have just coded bootstrap carousel but I'm not able to get the indicators (left, right) for scrolling.

Please find the snippet below

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width; initital-scale=1">
    <title> Bootstrap Example</title>

    <!-- Bootstrap References -->

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="index.js"></script>
    <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div id="mySlider" class="carousel slide" data-ride="carousel">

                    <!-- .nav's buttons on the bottom -->
                    <ol class="carousel-indicators">
                      <li data-target="#mySlider" data-slide-to="0" class="active"></li>
                      <li data-target="#mySlider" data-slide-to="1"></li>
                    </ol>

                    <!-- Image slides -->
                    <div class="carousel-inner" role="listbox">

                        <div class="item active">
                            <figure>
                                <img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1">
                                <!--<div class="carousel-caption">This is a fruit leaf</div>-->
                            </figure>
                            <figcaption class="carousel-caption">This is a fruit leaf</figcaption>
                        </div>

                        <div class="item">
                            <figure>
                                <img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2">
                                <!--<div class="carousel-caption">This is a fruit leaf</div>-->
                            </figure>
                            <figcaption class="carousel-caption">KIWIf</figcaption>
                        </div>

                    </div> <!-- END: Image slides -->


                    <!-- Slide buttons (left,right) buttons -->
                    
                    <a class="left coursel-control" href="#mySlider" role="button" data-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                    </a>
                    <a class="right coursel-control" href="#mySlider" role="button">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
                    </a>

                </div> <!-- END: Slider -->
            </div>
        </div>
    </div>
</body>

</html>

I get the scrolling and everything but the right "Indicator" to scroll does not appear

What am I doing wrong?

Thanks

Upvotes: 0

Views: 4081

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

Added the default glyphicons and you're missing the data-slide attribute on the right/next arrow. 

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width; initital-scale=1">
  <title> Bootstrap Example</title>

  <!-- Bootstrap References -->

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script src="index.js"></script>
  <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div id="mySlider" class="carousel slide" data-ride="carousel">

          <!-- .nav's buttons on the bottom -->
          <ol class="carousel-indicators">
            <li data-target="#mySlider" data-slide-to="0" class="active"></li>
            <li data-target="#mySlider" data-slide-to="1"></li>
          </ol>

          <!-- Image slides -->
          <div class="carousel-inner" role="listbox">

            <div class="item active">
              <figure>
                <img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1">
                <!--<div class="carousel-caption">This is a fruit leaf</div>-->
              </figure>
              <figcaption class="carousel-caption">This is a fruit leaf</figcaption>
            </div>

            <div class="item">
              <figure>
                <img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2">
                <!--<div class="carousel-caption">This is a fruit leaf</div>-->
              </figure>
              <figcaption class="carousel-caption">KIWIf</figcaption>
            </div>

          </div><!-- END: Image slides -->


<!-- Slide buttons (left,right) buttons -->

<a class="left carousel-control" href="#mySlider" 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="#mySlider" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

        </div>
        <!-- END: Slider -->
      </div>
    </div>
  </div>
</body>

Upvotes: 2

Related Questions