2017-06-12 137 views
0

我在我的网站的一个页面上有多个轮播和这一个我无法去工作。右侧和左侧按钮不会更改幻灯片,我无法弄清楚原因。Bootstrap旋转木马箭头不改变幻灯片

这里是一个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

链接当您在它工作的最后一个脚本添加结束脚本标签。

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

fiddle

+0

良好的渔获!我错过了结束标签。当它只是旋转木马时,它确实有用,但在我的网站上它不起作用。我正在尝试修复的页面上有2个轮播。他们都有一个data-ride =“carousel”。这可能是什么混乱吗? – Abbey

+0

http://nebraskaonehealth.unl.edu/index-new.asp – Abbey

相关问题