tiempo - El carrusel de JavaScript Bootstrap no deja de andar en bicicleta
hacer bicicleta adelgaza el abdomen (11)
Además de lo que sugiere @dgabriel, asegúrese de que la llamada de JavaScript que inicializa el carrusel de Bootstrap sea DESPUÉS de que el <script> haga referencia a jQuery, bootstrap-transition.js y bootstrap-carrusel.js, más o menos así:
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(''.gallery-carousel'').each(function(){
$(this).carousel({
interval: false
});
});
});
</script>
Esto asegura que el carrusel funcione según lo previsto (errores como Uncaught ReferenceError: $ is not defined (anonymous function) por ejemplo.
Versión de Twitter Bootstrap: 2.0.3
Ejemplo de código HTML:
<!DOCTYPE html>
<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" />
<script type="text/javascript">
$(document).ready(function() {
$(''.carousel'').each(function(){
$(this).carousel({
pause: true,
interval: false
});
});
});
</script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</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>
</body>
</html>
CSS: provisto con bootstrap.css
Problema: Como puede ver, he habilitado el modo pausa y desactivado el ciclo . Pero cuando hago clic en los controles izquierdo o derecho del carrusel, el carrusel comienza a ciclar en el intervalo predeterminado (5 segundos por ciclo) en mouseleave.
¿Cómo desactivo forzosamente el ciclismo? Quiero que el usuario haga el ciclo de las imágenes manualmente.
Puede probar el problema en vivo en mi sitio de prueba here .
Creo que la respuesta de @dgabriel debería funcionar, porque:
El método pause () de bootstrap carrusel no trata su argumento de la manera que crees. pause (true) no significa "sí, pause it", ni pause (false) significa "no, no lo detenga".
se puede ver en el código fuente,
Carousel.prototype.pause = function (e) {
e || (this.paused = true)
...
this.interval = clearInterval(this.interval)
return this
}
github enlace here
como se puede ver, si e es verdadero, this.paused = true no se ejecutará. así que cuando el evento "mouseleave" se dispara, el método cycle () sigue viendo "paused == false" y setInterval se ejecuta nuevamente, por lo que su carrusel no se quedará quieto.
// mouseleave event fires using cycle() with no arguments
.on(''mouseleave'', $.proxy(this.cycle, this))
// so when cycle() is called, this.paused == false.
Carousel.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
// set interval == false to prevent setInterval
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
return this
}
para pausar, use .pause() e interval=false para evitar que el evento "mouseleave" se recicle. bootstrap lo usa de esta manera, se puede ver here
En realidad, cambiar los valores predeterminados en bootstrap-carrusel.js de la siguiente manera me ayudó.
Carousel.DEFAULTS = {
interval: false,
pause: ''hover'',
wrap: false
}
Es posible que desee intentar eliminar el atributo "pausa". No es necesario si no está ciclando automáticamente a través de las imágenes. Mi suposición (y voy a ver el código de arranque para verificar) es que cuando el evento "mouseleave" se activa, el ciclo se reanuda, incluso si se apagó en primer lugar. Cuando se reanuda, usa la velocidad predeterminada.
Aquí hay una solución:
$(function() {
$(''.carousel'').each(function(){
$(this).carousel({
interval: false
});
});
});
Intenté todo, pero nada funcionó. Resolví el problema al cambiar los archivos bootstrap.min.js y bootstrap.js. Tienes que buscar "carousel.defaults" con Ctrl + F en estos archivos y reemplazar lo que contiene por:
interval:false
No estoy seguro de por qué, pero la solución principal tampoco me funcionó. Extraño.
Para solucionar mi problema, hice el siguiente código.
$(''.carousel'').carousel({interval: false});
$(document).on(''mouseleave'', ''.carousel'', function() {
$(this).carousel(''pause'');
});
Consulte la documentación sobre carouselpause .
Para desactivar el ciclo, una solución de trabajo es agregar data-interval = "false" al contenedor del carrusel:
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="active item">toto</div>
<div class="item">tata</div>
<div class="item">tutu</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
Solo se me ocurrió una solución para este problema. Ninguno de los anteriores funcionó para mí, pero me hizo ver el código de arranque. Creo que la razón de este error está en el archivo bootstrap-carousel.js en el objeto predeterminado:
$.fn.carousel.defaults = {
interval: 5000
, pause: ''hover''
}
Después de que el carrusel se desliza, termina volviendo a estos valores predeterminados. Si desea que el carrusel no se deslice y solo lo controle el usuario, puede cambiar el objeto predeterminado para que tenga un intervalo de falso. Espero que esto ayude.
$.fn.carousel.defaults = {
interval: false
, pause: ''hover''
}
También tengo un problema al hacer que Stop bootstrap Carousel reproduzca automáticamente. Comprobé el archivo bootstrap.js y encontré códigos relacionados con el carrusel y luego eliminé el otro js. En el nuevo archivo js hago una copia de todos los códigos y luego cambio la variable de Carousel_n a Carousel_n (porque es posible cambiarla a cualquier cosa que desee). En la última línea de códigos, lo más importante es:
{ $(''[data-ride="carousel"]'').each(function () }
Cambio el carousel a carousel_n .
para html solo cambié:
<div id="Carousel" class="carousel slide" data-ride="carousel">
a
<div id="Carousel" class="carousel slide" data-ride="carousel_n">
y, por supuesto, realmente funcionó.
$(''your-carousel'').carousel({
pause: true,
interval: false
});
<div id="carousel-example-generic" class="carousel slide" data-wrap="false">