user31782 user31782 - 1 month ago 7
HTML Question

How to pass multiple options to bootstrap carousel's optional options object in Firefox?

I have been studying Bootstrap carousel from their official site. Where they suggest that to pause the cycling of carousel on mouseenter event set

pause
to
"hover"
. I also want to change the cycling speed to 1sec so I tried this:

$('.carousel').carousel({
pause: "hover",
interval: 1000
})


It set the cycling speed to 1 second but the carousel still doesn't stop on hovering over it. So my questions are:


  1. Why doesn't the carousel stop cycling even after setting
    pause
    to
    hover
    .

  2. It is said that the default value of
    pause
    is
    hover
    then why don't the carousel stop cycling on hover by default? Why would I even use
    null
    for
    pause
    if the carousel is by default not passable on hover?



Note: This bug only appears in firefox browser. In chrome the carousel pauses on hover.

Answer

Have you tried this:

$('#myCarousel').hover(function () { 
    $(this).carousel('pause');
}, function () { 
    $(this).carousel('cycle');
});

as seen here: https://github.com/twbs/bootstrap/issues/1048

EDIT: I implemented a fully working carousel on https://www.koopensteun.be, code:

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img class="width90" src="img/1.jpg" alt="Gratis het goede doel steunen! Hoe kan dat?" width="460" height="345">
      </div>

      <div class="item">
        <img class="width90" src="img/2.jpg" alt="Na aankoop bedanken de webshops op Koop&Steun ons voor de reclame" width="460" height="345">
      </div>

      <div class="item">
        <img class="width90" src="img/3.jpg" alt="Wij storten deze bijdrage door naar jouw favoriete goede doel of vereniging!" width="460" height="345">
      </div>
    </div>
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
</div>
Comments