javascript - 轮播“下一页”和“上一页”功能在单页应用程序SPA中不起作用

我正在使用此代码在SPA中使用Bootstrap Carousel。我是新手

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

但是，当我单击Next或Prev箭头按钮时，找到页面#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>

关于javascript - 轮播“下一页”和“上一页”功能在单页应用程序SPA中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40758424/