So pausieren Bootstrap Karussell auf Eingabefokus

Question

Ich habe ein Bootstrap Karussell, das eine einfache Form enthält. Sie können festlegen, dass das Karussell angehalten wird, wenn es aktiviert ist. Wenn der Cursor jedoch den Bereich "Karussell" verlässt, während er Eingaben eingibt, kehrt das Karussell in den Standardzyklus und das Intervall von 5000 ms zurück.

Ich möchte es so einstellen, dass es während des Eingabefokusses pausiert bleibt und den Zyklus beim Eingabefokussieren neu startet.

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

Es scheint, dass, sobald ein Karussell zunächst genannt wurde (und ein Intervall eingestellt) Sie nicht, dass Intervall oder Karussell Verhalten verändern können.

Alle Einblicke wären toll.

Answer 1

Sie müssen die Pause-Funktion wie folgt aufrufen: $("#myCarousel").carousel('pause');. Auf diese Weise werden alle Methoden in Bootstrap-Komponenten aufgerufen, die der jQuery UI-Konvention folgen.

Sie können das Karussell neu starten, indem Sie das Ereignis blur abhören und dann die Methode cycle aufrufen. Außerdem müssen Sie Ihre Ereignishandler in den Wrapper $(function() {...}); verschieben. Dies stellt sicher, dass alle DOM-Elemente vorhanden und bereit sind, manipuliert zu werden.

So Ihre Pausieren/cycling Code würde wie folgt aussehen:

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

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

Working Demo

Answer 2

Dies ist, wie Sie ein Karussell

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

Answer 3

Pause omg, ich denke, es wäre besser, Karussell den richtigen Weg zu initiieren.

beim Schweben lassen Sie sie nicht anhalten und auf mouseleave pause Objekt!

sehen diese

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