【问题标题】:Bootstrap Carousel interval on each slide working after 2 slides not on first and second slide每张幻灯片上的引导轮播间隔在 2 张幻灯片后工作,而不是在第一张和第二张幻灯片上
【发布时间】:2016-06-06 06:01:38
【问题描述】:

如您所见,在前两张幻灯片中,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>

【问题讨论】:

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


【解决方案1】:

我认为您应该将第一个孩子的值从 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">

【讨论】:

  • 那么它不起作用..如果我将第一个更改为 5000,则第一张和第二张幻灯片之间的幻灯片间隔也更改为 5000,我不希望我希望第一张和第二张幻灯片之间的幻灯片间隔为 3000 ms 和其余 5000 jsfiddle.net/qwgp09ux 看看
猜你喜欢
  • 1970-01-01
  • 2021-01-17
  • 1970-01-01
  • 1970-01-01
  • 2021-10-12
  • 1970-01-01
  • 2013-08-24
  • 1970-01-01
  • 2013-04-29
相关资源
最近更新 更多