Question

我的网站的一个页面上有多个轮播，这个我无法上班。右侧和左侧按钮不会更改幻灯片，我无法弄清楚原因。

以下是指向codepen https://codepen.io/aahmed2/pen/PjzwaQ

的链接

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div id="news-carousel" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="carousel-caption">
        <h2 class="white shadow">In The News:</h2>
                <h3 class="white shadow">The Global Gap In Health Care Dollars For Young And Old Is Huge</h3>
                <a class="button-rev button-left" href="http://www.npr.org/sections/goatsandsoda/2017/05/09/527453473/old-people-get-very-little-health-care-in-the-developing-world" target="_blank">Learn More</a>
      </div>
    </div>
    <div class="item">
      <div class="carousel-caption">
        <h2 class="white shadow">In The News:</h2>
                <h3 class="white shadow">Can Saving Animals Prevent the Next Deadly Pandemic?</h3>
                <a class="button-rev button-left" href="http://www.smithsonianmag.com/science-nature/can-saving-animals-to-prevent-next-deadly-pandemic-180963151/" target="_blank">Learn More</a>
      </div>
    </div>
    <div class="item">
      <div class="carousel-caption">
        <h2 class="white shadow">In The News:</h2>
                <h3 class="white shadow">Coyotes No Match for Wolves’ Hunting Prowess</h3>
                <a class="button-rev button-left" href="http://news.unl.edu/newsrooms/today/article/big-game-jitters-coyotes-no-match-for-wolves-hunting-prowess/" target="_blank">Learn More</a> 
      </div>
    </div>
  </div>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">

Answer 1

When you add the closing script tag on the last script it works.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

See fiddle

Bootstrap Carousel箭头不改变幻灯片

1 个答案: