javascript - example - modificar carousel bootstrap
¿Cómo cambiar el tiempo de intervalo en el carrusel bootstrap? (4)
Tengo un carrusel de arranque en mi página web, estoy intentando aumentar el intervalo de tiempo entre cada diapositiva. El retraso predeterminado de 5000 milisegundos es demasiado rápido, necesito unos 10 segundos.
Puede utilizar las opciones al inicializar el carrusel, de esta manera:
// interval is in milliseconds. 1000 = 1 second -> so 1000 * 10 = 10 seconds
$(''.carousel'').carousel({
interval: 1000 * 10
});
o puede usar el atributo de interval directamente en la etiqueta HTML , como esto:
<div class="carousel" data-interval="10000">
La ventaja de este último enfoque es que no tiene que escribir ningún JS para ello, mientras que la ventaja del primero es que puede calcular el intervalo e inicializarlo con un valor variable en tiempo de ejecución.
Simplemente puede utilizar el atributo de data-interval de la clase de carousel .
Su valor predeterminado está establecido en data-interval="3000" es decir, 3 segundos.
Todo lo que necesita hacer es configurarlo a sus requisitos deseados.
También puede utilizar el atributo de intervalo de datos, por ejemplo. <div class="carousel" data-interval="10000">
You need to set interval in main div as data-interval tag .
so it is working fine and you can give different time to different slides.
<!--main div -->
<div data-ride="carousel" class="carousel slide" data-interval="100" id="carousel-example-generic">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
i>
</ol>
<!-- Wrapper for slides -->
<div role="listbox" class="carousel-inner">
<div class="item">
<a class="carousel-image" href="#">
<img alt="image" src="image.jpg">
</a>
</div>
</div>
</div>