Comment faire une pause Bootstrap carrousel sur le focus d'entrée
J'ai un Bootstrap carrousel qui contient un formulaire simple. Vous pouvez définir le carrousel en pause quand planait sur. Toutefois, si le curseur quitte le Carrousel tout en tapant dans les entrées, le manège reprend son cycle par défaut et l'intervalle de 5000 ms.
Je suis à la recherche pour le régler à rester en pause pendant le focus d'entrée et de redémarrer le cycle sur l'entrée focusout.
<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>
Il semble qu'une fois un carrousel a été initialement appelé (et un intervalle défini) vous ne pouvez pas modifier cet intervalle ou de carrousel comportement.
Des idées serait génial.
- Juste un précurseur. C'est une version allégée. Je ne suis pas à la recherche pour le code HTML de conseils (pas de formulaire, etc), juste un peu de javascript conseils relatifs à l'Amorce du Carrousel. Merci
Vous devez vous connecter pour publier un commentaire.
Vous aurez besoin d'appeler la fonction de pause comme ceci:
$("#myCarousel").carousel('pause');
. C'est la façon dont toutes les méthodes sont appelées sur bootstrap composants, à la suite de l'jQuery UI convention.Vous pouvez redémarrer le carrousel de l'écoute de la
blur
événement, puis l'appel de lacycle
méthode. Vous aurez également besoin de déplacer vos gestionnaires d'événements à l'intérieur de la$(function() {...});
wrapper. Cela garantit que tous les éléments du DOM sont présents et prêts à être manipulés.Donc votre pause/cyclisme code devrait ressembler à:
Travail De Démonstration
C'est une façon de mettre en pause un carrousel
omg, je pense qu'il serait mieux d'init manège le droit chemin....
sur le vol stationnaire ne les laissez pas mettre en pause et mouseleave pause objet!
voir ce
Greetz zumi