Bootstrap Carousel interval on each slide working after 2 slides not on first and second slide

Question

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

Answer 1

I think you should change the value of first child from 1000 to 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">