Jak wstrzymać karuzelę Bootstrap na ognisku wejściowym

Question

Mam karuzelę Bootstrap, która zawiera prosty formularz. Możesz ustawić karuzelę tak, by zatrzymywała się, gdy się nią kręci. Jeśli jednak kursor opuszcza obszar karuzeli podczas wpisywania w obrębie danych wejściowych, karuzela powraca do domyślnego cyklu i przedziału 5000 ms.

Czekam, aby ustawić go tak, aby pozostał zatrzymany podczas fokusowania wejściowego i wznowił cykl po aktywacji wejścia.

<div id="myCarousel" class="carousel slide"> 
<div class="carousel-inner"> 
    <div id="slide1" class="item"> 
     This is a test slide. 
    </div> 
    <div id="slide2" class="item" > 
     <input type="text" placeholder="name" name="full_name" /> 
    </div> 
</div> 

<!-- Carousel nav --> 
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> 

</div> 

<script> 

!function ($) { 
    $(function(){ 
     $('#myCarousel.slide').carousel({ 
      interval: 5000, 
      pause: "hover" 
     }) 
    }) 
}(window.jQuery) 

$('input').focus(function(){ 
    $("#myCarousel").pause() 
}) /* Will worry about restarting carousel on mouseout if I could get this pause working */ 


</script> 

Wydaje się, że gdy karuzela została początkowo nazywany (i odmierzanie czasu) nie można zmieniać tego przedziału lub karuzeli zachowanie.

Wszelkie spostrzeżenia będą świetne.

Answer 1

Będziesz musiał wywołać funkcję pauzy w ten sposób: $("#myCarousel").carousel('pause');. W ten sposób wszystkie metody są wywoływane na komponentach bootstrap, zgodnie z konwencją jQuery UI.

Możesz ponownie uruchomić karuzelę, słuchając zdarzenia blur, a następnie wywołując metodę cycle. Będziesz także musiał przenieść swoje programy do obsługi zdarzeń w opakowaniu $(function() {...});. Dzięki temu wszystkie elementy DOM są obecne i gotowe do manipulacji.

Więc kod Wstrzymywanie/cycling wyglądałby następująco:

$(function(){ 
    $('#myCarousel.slide').carousel({ 
     interval: 5000, 
     pause: "hover" 
    }); 

    $('input').focus(function(){ 
     $("#myCarousel").carousel('pause'); 
    }).blur(function() { 
     $("#myCarousel").carousel('cycle'); 
    }); 
}); 

Working Demo

Answer 2

ten sposób można wstrzymać karuzelę

$("#myCarousel").carousel('pause'); 

Answer 3

omg, myślę, że byłoby lepiej zainicjować karuzelę we właściwy sposób ....

po najechaniu myszą, nie pozwól im się zatrzymać i zatrzymać obiekt na myszy!

zobaczyć ten

$(".carousel").hover(
      function() { 
       $("#"+this.id).carousel({ 
        interval: 2000, 
        //pause: 'hover' 
        pause: 'none' // disable default option "pause on hover" and set it to none 
       }); 
      }, function() { 
       $("#"+this.id).carousel('pause'); // to set it manually on a spezific carousel id 
      } 
    ); 

Greetz Zumi