シングルページアプリケーションでカルーセル "next"と "prev"機能が動作しないSPA

Question

このコードを使用してSPAにブートストラップカルーセルを使用しています。私は、ブートストラップ

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

で新しいです。しかし、私はページ#myCarouselを見つけるNextかPrev矢印ボタンをクリックしたときではなく、次のスライドを示しています。助けてください。

Answer 1

私はhrefの値を削除し、この問題を解決し、アンカーのプロパティとして

データターゲット= "＃1 myCarousel

を追加<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> 

Answer 2

内のバナーを使用しましたにタグ<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>