CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapcarousel
Sayangdipto Chakraborty
Sayangdipto Chakraborty

Reputation: 61

Carousel Indicators not working on Bootstrap

I was trying to make a carousel of 8 images however the indicators are not working neither are the left and right arrows. I don't know what's wrong with my code. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="myCarousel" class="carousel slide carousel1" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#i1" data-slide-to="0" class="active"></li>
    <li data-target="#i2" data-slide-to="1"></li>
    <li data-target="#i3" data-slide-to="2"></li>
    <li data-target="#i4" data-slide-to="3"></li>
    <li data-target="#i5" data-slide-to="4"></li>
    <li data-target="#i6" data-slide-to="5"></li>
    <li data-target="#i7" data-slide-to="6"></li>
    <li data-target="#i8" data-slide-to="7"></li>
  </ol>

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

Upvotes: 1

Views: 3424

Answers (1)

Honsa Stunna
Honsa Stunna

Reputation: 595

The data-target has to be the carousel selector, in your case the element id myCarousel.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>.item {
  height: 100px;
}
.item:nth-child(odd) {
  background-color: lightblue;
}

.item:nth-child(even) {
  background-color: lightgreen;
}</style>
<div id="myCarousel" class="carousel slide carousel1" 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>
    <li data-target="#myCarousel" data-slide-to="4"></li>
    <li data-target="#myCarousel" data-slide-to="5"></li>
    <li data-target="#myCarousel" data-slide-to="6"></li>
    <li data-target="#myCarousel" data-slide-to="7"></li>
  </ol>
  
  <div class="carousel-inner">
    <div class="item active"> 
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
  </div>

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

Upvotes: 3

Related Questions