CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Rao Adnan
Rao Adnan

Reputation: 1647

Carousel "next" and "prev" function not work in single page application SPA

I am using Bootstrap Carousel in SPA using this code. I am new with bootstrap

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<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>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
  <a href="#discription" role="image">
    <img src="cloth5.jpg" alt="Loading..." width="100%" height="auto">
</a>
  </div>
  <div class="item">
    <img src="cloth5.jpg" alt="Loading..." width="460" height="345">
  </div>

  <div class="item">
    <img src="menjeans.jpg" alt="Loading..." width="460" height="345">
  </div>

  <div class="item">
    <img src="menjeans.jpg" alt="Loading..." width="460" height="345">
  </div>
</div>

<!-- Left and right controls -->
<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>

But when I click on Next or Prev arrow buttons that find page #myCarousel rather shows next slide. Please help what I do.

Upvotes: 2

Views: 2705

Answers (2)

Rao Adnan
Rao Adnan

Reputation: 1647

I solve this issue removing href value and add

data-target="#myCarousel

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

Upvotes: 2

J.K
J.K

Reputation: 1374

Did you use the banner inside <div id="myCarousel" class="carousel slide" data-ride="carousel">

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
  <a href="#discription" role="image">
    <img src="cloth5.jpg" alt="Loading..." width="100%" height="auto">
</a>
  </div>
  <div class="item">
    <img src="cloth5.jpg" alt="Loading..." width="460" height="345">
  </div>

  <div class="item">
    <img src="menjeans.jpg" alt="Loading..." width="460" height="345">
  </div>

  <div class="item">
    <img src="menjeans.jpg" alt="Loading..." width="460" height="345">
  </div>
</div>

<!-- Left and right controls -->
<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>

Upvotes: 2

Related Questions