我的网站的一个页面上有多个轮播,这个我无法上班。右侧和左侧按钮不会更改幻灯片,我无法弄清楚原因。
以下是指向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">
答案 0 :(得分:0)
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