[英]Bootstrap Carousel interval on each slide working after 2 slides not on first and second slide
As you can see that here on first two slides the interval attribute doesnt work or maybe it's taking the first one for the second. 如您所见,这里的前两张幻灯片的interval属性不起作用,或者第二张幻灯片需要第一张。 i want to set different interval between first and second slide and for rest it may remain same.. but i am for some reason unable to do this.. kindly help 我想在第一张和第二张幻灯片之间设置不同的间隔,其余的它可能保持不变..但是由于某种原因我无法做到这一点..请帮助
$.fn.carousel.Constructor.prototype.cycle = function (e) { e || (this.paused = false) this.interval && clearInterval(this.interval) this.options.interval && !this.paused && (this.interval = setInterval($.proxy(this.next, this), this.$element.find('.item.active').data('interval') || this.options.interval)) return this }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div id="carousel-1" class="carousel carousel-fade slide" data-ride="carousel"> <div class="pause-play-buttons"> <i id="playButton" class="fa fa-play" aria-hidden="true"></i> <i id="pauseButton" class="fa fa-pause" aria-hidden="true"></i> </div> <ol class="carousel-indicators"> <li class="active" data-target="#carousel-1" data-slide-to="0"></li> <li data-target="#carousel-1" data-slide-to="1"></li> <li data-target="#carousel-1" data-slide-to="2"></li> <li data-target="#carousel-1" data-slide-to="3"></li> <li data-target="#carousel-1" data-slide-to="4"></li> <li data-target="#carousel-1" data-slide-to="5"></li> <li data-target="#carousel-1" data-slide-to="6"></li> <li data-target="#carousel-1" data-slide-to="7"></li> <li data-target="#carousel-1" data-slide-to="8"></li> <li data-target="#carousel-1" data-slide-to="9"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active" data-interval="1000"> <img src="http://neelnetworks.org/stangelos/images/pictures_carousel/1.jpg" alt="..."> <div class="carousel-caption wow animated fadeInUp animated"> Wi-Fi for everybody, <br> benefits for you </div> </div> <div class="item" data-interval="5000"> <img src="http://neelnetworks.org/stangelos/images/pictures_carousel/3.jpg" alt="..."> <div class="carousel-caption animated fadeInRight"> Let the good times begin, make your Social Wi-Fi profitable! </div> </div> <div class="item" data-interval="5000"> <img src="http://neelnetworks.org/stangelos/images/pictures_carousel/4.jpg" alt="..."> <div class="carousel-caption animated fadeInDown" style="color: #4e0054; text-shadow: 0 0 2px #fff;"> Your patients enjoy high quality Wi-Fi while waiting for your assistance </div> </div> <div class="item" data-interval="5000"> <img src="http://neelnetworks.org/stangelos/images/pictures_carousel/6.jpg" alt="..."> <div class="carousel-caption animated fadeInLeft" style="color: #006b24;"> Controlled Wi-Fi avoids intruders and prevents abuses </div> </div> <div class="item" data-interval="5000"> <img src="http://neelnetworks.org/stangelos/images/pictures_carousel/5.jpg" alt="..."> <div class="carousel-caption animated fadeInUp" style="color: #006b24;"> Social Wi-Fi gets closer to your customers, even if they are out of your shop … </div> </div> <div class="item" data-interval="5000"> <img src="http://neelnetworks.org/stangelos/images/pictures_carousel/9.jpg" alt="..."> <div class="carousel-caption animated fadeInUp"> With Optimized Wi-Fi you get good coverage and fast browsing </div> </div> <div class="item" data-interval="5000"> <img src="http://neelnetworks.org/stangelos/images/pictures_carousel/8.jpg" alt="..."> <div class="carousel-caption animated fadeInDown" style="color: #006b24;"> To better know your clients… Get closer them with Social Wi-Fi! </div> </div> <div class="item" data-interval="5000"> <img src="http://neelnetworks.org/stangelos/images/pictures_carousel/7.jpg" alt="..."> <div class="carousel-caption animated fadeInRight" style="color: #4e0054; text-shadow: 0 0 2px #fff;"> Be always connected to your customer thanks to Social Wi-Fi </div> </div> <div class="item" data-interval="5000"> <img src="http://neelnetworks.org/stangelos/images/pictures_carousel/2.jpg" alt="..."> <div class="carousel-caption animated fadeInLeft"> Optimized Wi-Fi, your patients connected as if the network is only for them </div> </div> <div class="item" data-interval="5000"> <img src="http://neelnetworks.org/stangelos/images/pictures_carousel/10.jpg" alt="..."> <div class="carousel-caption animated fadeInLeft" style="color: #4e0054; text-shadow: 0 0 2px #fff;"> Let the good times begin, make your Social Wi-Fi profitable! </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev"> <span class="fa fa-angle-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next"> <span class="fa fa-angle-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
I think you should change the value of first child from 1000 to 5000. 我认为您应该将第一个孩子的值从1000更改为5000。
From 从
<div class="carousel-inner" role="listbox">
<div class="item active" data-interval="1000">
To 至
<div class="carousel-inner" role="listbox">
<div class="item active" data-interval="5000">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.