javascript - template - carrusel de imagenes html5

¿Cómo puedo hacer que el carrusel de Bootstrap js se active automáticamente tan pronto como se cargue la página?

Question

Usando bootstrap.js versión 2.02

Intento que Twitter Bootstrap Carousel se active automáticamente tan pronto como alguien visite mi sitio. En este momento, el ciclo automático funciona solo después de hacer clic en uno de los botones de ciclo al menos una vez.

Quiero que el carrusel comience a circular en el intervalo de inmediato.

¿Alguien sabe como hacer esto?

Mi sitio es hotairraccoon.com

Verá cómo después de hacer clic en el carrusel una vez, comienza a circular cada 5 segundos más o menos, pero no quiero que se requiera el clic para revelar el contenido del carrusel.

¡Gracias!

Answer 1

Aunque indudablemente hay respuestas correctas aquí, solo quería agregar que puede reproducir el comportamiento exacto tal como lo describe el póster agregando errores a su código. Por ejemplo, elimine los puntos y coma o la etiqueta del script de finalización, y el carrusel ya no se reproducirá automáticamente.

¡Entonces, lo primero que debe hacer es buscar errores en su consola de JavaScript!

Answer 2

El archivo jquery.js debe cargarse antes de bootstrap.js, ya sea que estén ubicados en las etiquetas de cabecera o al final de su archivo.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"type="text/javascript"></script>

Answer 3

En Bootstrap 3.0, esto se puede lograr agregando un atributo ''data-ride'' al contenedor del carrusel:

...

Answer 4

En Bootstrap 3.0, esto se puede lograr agregando un atributo ''data-ride'' al contenedor del carrusel:

<div id="my-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
...
</div>
</div>

https://github.com/twbs/bootstrap/blob/v3.0.0/js/carousel.js#L210

Answer 5

Esta es la solución que funcionó para mí, basada en la respuesta de Jesse Carter a esta pregunta. No tengo idea de por qué funciona, pero por alguna razón necesita 2 llamadas, una dentro del documento listo para el punto y la otra fuera. Si elimino cualquiera de ellos, algo sale mal, por ejemplo, la funcionalidad de pausa no puede funcionar correctamente o el ciclo automático. Además de esto, el intervalo solo parece funcionar dentro del doc.ready. Comentarios de javascript heads son bienvenidos ;-) pero sospecho que esta área de TB no está completamente libre de errores. Estoy usando 2.0.2 que sé que está un poco rezagado (la versión actual es 2.0.4 ) pero no veo ningún cambio en esta área

jQuery(document).ready(function () {
jQuery(''#myCarousel'').carousel(
{
interval:2000
});
});
jQuery(''#myCarousel'').carousel();

Answer 6

Hay una forma más de ciclar automáticamente el carrusel de arranque.

use el atributo data-ride="carousel" . Le dice al programa de arranque que comience a animar el carrusel de inmediato cuando se carga la página.

Answer 7

Intente inicializar su carrusel de esta manera:

$(''.carousel'').carousel().next();

Answer 8

La forma correcta de arreglar esto es agregar la clase "activa" a la primera imagen en el carrusel mientras la creas. Esto hará que el carrusel comience a circular lo más pronto posible.

Aquí hay un ejemplo:

 <div class="carousel slide">
<div class="carousel-inner">
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>

Answer 9

No estoy seguro si resolvió esto, pero yo también estaba teniendo ese problema. Lo resolví envolviendo la configuración del intervalo del carrusel en una función como esta:

!function ($) {
$(function() {
$(''.carousel'').carousel({ interval: 3000 })
});
}(window.jQuery);

Answer 10

Nota: Como se mencionó en los comentarios, esta solución funcionará correctamente para Bootstrap 2. Consulte la respuesta de MattZ para obtener instrucciones sobre cómo lograr el mismo comportamiento en Bootstrap 3.

Tuve el mismo problema que tú y todo lo que tuve que hacer para solucionarlo fue llamar al método carrusel (''ciclo'') después de haber inicializado el carrusel:

<script type="text/javascript">
$(document).ready(function () {
$(''.carousel'').carousel({
interval: 3000
});
$(''.carousel'').carousel(''cycle'');
});
</script>

Me doy cuenta de que esta pregunta es antigua, pero esta noche estaba buscando en Google tratando de resolverlo y vi que nadie había respondido correctamente. La respuesta más votado no iniciará automáticamente el carrusel, solo se activará una vez que se haya presionado un botón, que no es lo que el OP estaba buscando.

Answer 11

Prueba esto.

$(document).ready(function ()
{
$(''.carousel'').carousel({interval:5000,pause:false});
});

Answer 12

Una solución rápida y sucia es hacer clic en el botón de programar en el documento:

$(function() {
$(".right.carousel-control").click();
});

Por cierto: asegúrate de cargar jQuery antes de los otros scripts que hacen referencia a $, en este momento tienes dos Uncaught ReferenceError: $ is not defined porque llamas $ en la línea 101 y 182, pero jquery se carga primero en la línea 243.

Yo recomendaría usar una herramienta como firebug o herramienta de desarrollador (chrome / safari) para detectar estos errores.

EDITAR: Creo que ya tiene una solución de trabajo, pero como usa jquery antes de que se cargue, no funciona.

Answer 13

si ninguna de esas soluciones funciona para usted. prueba esto:

$(document).ready(function () {
function playcarousel(){
$(''.carousel-control.right'').trigger(''click'');
}
window.setInterval(playcarousel, 4000);
});

Answer 14

 <div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img1" class="img-responsive" alt="stuff1" >
</div>
<div class="item">
<img src="img2" class="img-responsive" alt="stuff2" >
</div>
</div>
<!-- Controls-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!--This script should be at the very bottom of the page (footer works for me)-->
<script>
$(''#myCarousel'').carousel
({
interval: 2000,
})
</script>

Answer 15

$(''.carousel'').carousel({
interval: 2000
})