Come mettere in pausa il carosello Bootstrap sul fuoco di input

Question

Ho un carosello Bootstrap che contiene un modulo semplice. È possibile impostare il carousel in pausa quando si passa sopra. Tuttavia, se il cursore lascia l'area Carousel durante la digitazione all'interno degli input, il carousel ritorna al suo ciclo predefinito e all'intervallo di 5000 ms.

Sto cercando di impostarlo per rimanere in pausa durante la messa a fuoco e il ciclo di riavvio sul focusout di input.

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

Sembra che una volta che un carosello è stato inizialmente chiamato (e un set di intervalli) non è possibile modificare tale intervallo o carosello comportamento.

Qualsiasi approfondimento sarebbe fantastico.

Answer 1

Avrete bisogno di chiamare la funzione di pausa in questo modo: $("#myCarousel").carousel('pause');. Questo è il modo in cui tutti i metodi vengono chiamati sui componenti bootstrap, seguendo la convenzione dell'interfaccia utente jQuery.

È possibile riavviare il carosello ascoltando l'evento blur quindi chiamando il metodo cycle. Avrai anche bisogno di spostare i gestori di eventi all'interno del wrapper $(function() {...});. Questo assicura che tutti gli elementi DOM siano presenti e pronti per essere manipolati.

Così il vostro codice di pausa/ciclismo sarà simile:

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

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

Working Demo

Answer 2

Questo è il modo di mettere in pausa un carosello

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

Answer 3

omg, penso che sarebbe meglio per avviare la giostra nel modo giusto ....

al passaggio del mouse non lasciarli sospendere e sull'oggetto pausa mouseleave!

vedono questo

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