每张幻灯片上的Bootstrap Carousel间隔在2张幻灯片不在第一张和第二张幻灯片上后工作

时间:2016-06-06 06:01:38

标签: javascript jquery html twitter-bootstrap twitter-bootstrap-3

正如你可以看到,在前两张幻灯片中,interval属性不起作用,或者它可能是第二张幻灯片。我想在第一张和第二张幻灯片之间设置不同的间隔,并且为了休息它可能保持不变..但我出于某种原因无法做到这一点..请帮助

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

1 个答案:

答案 0 :(得分:0)

我认为你应该将第一个孩子的价值从1000改为5000。

 <div class="carousel-inner" role="listbox">
                        <div class="item active"  data-interval="1000">

 <div class="carousel-inner" role="listbox">
                        <div class="item active"  data-interval="5000">