Evitar que el carrusel de arranque de Twitter se deslice automáticamente al cargar la página

119

Entonces, ¿hay alguna forma de evitar que el carrusel de arranque de Twitter se deslice automáticamente en la carga de la página a menos que se haga clic en el botón siguiente o anterior?

Gracias

jquery twitter-bootstrap carousel Tepken Vannkorn
fuente

Respuestas:

263

O si está utilizando Bootstrap 3.0, puede detener el ciclo con data-interval = "false", por ejemplo

<div id="carousel-example-generic" class="carousel slide" data-interval="false">

Otros atributos de datos de carrusel útiles están aquí -> http://getbootstrap.com/javascript/#carousel-usage

Michal Kopec
fuente
4
Esta no es 100% la respuesta a la pregunta porque también evita que se active incluso cuando se hace clic en un botón. Pero era exactamente lo que estaba buscando. ¡Así que gracias de todos modos!
Tillito
3
data-interval="false"también funciona con Bootstrap 4
Ionuț Ciuta
53

De hecho, el problema ya está resuelto. Agregué el argumento 'pausa' al método 'carrusel' como se muestra a continuación:

$(document).ready(function() {      
   $('.carousel').carousel('pause');
});

De todos modos, muchas gracias @Yohn por sus consejos para esta solución.

Tepken Vannkorn
fuente
7
Esto comenzará a deslizarse después de anterior / siguiente, eche un vistazo a stackoverflow.com/a/18208327/463065 si eso no es lo que está buscando.
Trufa
para uno más específico sería $(function(){ $("#idName").carousel('pause'); });
roger
43

El problema con el carrusel que se desliza automáticamente después de presionar el botón anterior / siguiente se resuelve. 

$('.carousel').carousel({
    pause: true,
    interval: false
});

GitHub confirma 78b927b

Srnux
fuente
17

si está usando arranque 3 conjunto data-interval="false"de la estructura HTML del carrusel

ejemplo: 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
marciocst
fuente
10
  • Úselo data-interval="false"para detener el deslizamiento automático
  • Úselo data-wrap="false"para detener el deslizamiento circular
Anil Ram
fuente
10

agregue esto a su course div:

data-interval="false"
Dylan B
fuente
La respuesta de Michael Kopec de hace 2 años ya dice que haga esto.
Todos los trabajadores son esenciales
5

A continuación se muestra la lista de parámetros para el carrusel de arranque. Como Intervalo, pausa, ajuste:

ingrese la descripción de la imagen aquí

Para obtener más detalles, consulte este enlace:

http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

Espero que esto te ayudará :)

Nota: Esto es para obtener más ayuda. Me refiero a cómo puede personalizar o cambiar el comportamiento predeterminado una vez que se carga el carrusel.

Vikash Pandey
fuente
2

Creo que tal vez deberías ir a verificar las instrucciones oficiales sobre carrusel, para mí, no he encontrado la respuesta anterior, debido a las múltiples versiones de bootstrap, estoy usando b4-alpha y quiero que se detenga el efecto de reproducción automática. 

$(document).ready({
    pause:true,
    interval:false
});

este script no tiene ningún efecto mientras el mouse abandona esa página, exactamente el área del carrusel. vaya a la definición oficial y encuentre esos:

ingrese la descripción de la imagen aquí

Entonces encontrará por qué. Si se activa la página del carrusel en el evento de mouseover, la página se detendrá, mientras que el mouse fuera de esa página, se reanudará nuevamente.

Entonces, si desea que una página se detenga para siempre y gire manualmente , puede configurarla data-interval='false'.

Cangrejo
fuente
1

--Use data-interval = "false" para detener el deslizamiento automático --Utilice data-wrap = "false" para detener el deslizamiento circular

...
Anil Kumar Ram
fuente
1

Para Bootstrap 4, simplemente elimine 'data-ride = "carousel"' del div del carrusel. Esto elimina la reproducción automática en el momento de la carga.

Para habilitar la reproducción automática de nuevo, aún tendría que usar la llamada "play" en javascript.

James
fuente