Aprenderemos cómo cambiar los intervalos del carrusel en tiempo de ejecución usando bootstrap. En este ejemplo, vamos a discutir múltiples enfoques. El carrusel de Bootstrap es una presentación de diapositivas para deslizarse a través de múltiples contenidos creados con JavaScript, CSS y animación. Funciona con texto, imágenes y marcas personalizadas. También incluye controles e indicadores anteriores y siguientes para controlar su movimiento.
Enfoque 1: podemos controlar la animación utilizando el atributo de intervalo de datos de cada elemento del carrusel. El ejemplo dado es el mejor ejemplo para entender este concepto. El atributo Intervalo de datos se utiliza para establecer el intervalo de tiempo entre dos elementos del carrusel de forma predeterminada, su valor es de 3000 milisegundos.
HTML
<html> <head> <!-- CSS only --> <link href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> <title>geeksforgeeks</title> </head> <body style="width:70%;"> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="100"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src= "https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210223134821/gfg3.jpg" alt="First slide"> </div> <div class="carousel-item" id="image2"> <img class="d-block w-100" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </body> </html>
Producción:
Enfoque 2: en este enfoque, cambiaremos el intervalo de animación utilizando el método API de arranque. Que toma un argumento como un intervalo de unidad de milisegundo, es decir (1s = 1000milisegundo). El intervalo que asignemos cambiará el tiempo de animación entre todos los elementos del carrusel en tiempo de ejecución. El intervalo de datos en la función de carrusel se utiliza para establecer el tiempo entre dos diapositivas de imágenes.
Sintaxis
$('.carousel').carousel({
interval: time in millisecond
});
HTML
<html>
<head>
<!-- CSS only -->
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<title>geeksforgeeks</title>
</head>
<body style="width:70%;">
<div id="carouselExampleIndicators"
class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators"
data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators"
data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators"
data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"
alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210223134821/gfg3.jpg"
alt="First slide">
</div>
<div class="carousel-item" id="image2">
<img class="d-block w-100" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="Third slide">
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleIndicators"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
// Handle Bootstrap carousel slide event
$('.carousel').carousel({
interval: 100
});
</script>
</body>
</html>
Producción:
Enfoque 3: podemos establecer el intervalo de datos utilizando el atributo de datos y javascript. Este enfoque es bastante simple como los dos enfoques anteriores. En este enfoque, vamos a seleccionar la clase div del carrusel y cambiar el atributo usando el método attr(). El método attr() es un método jquery que establece o devuelve los atributos y valores de los elementos seleccionados. Cuando se utiliza este método para devolver el valor, devuelve el valor del primer elemento coincidente y, si se utiliza para establecer el valor del atributo, establece el atributo de uno o más atributos.
Sintaxis:
$('.carousel').attr(
"data-interval","interval that you want to set (in milisec)
");
HTML
<html>
<head>
<!-- CSS only -->
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<title>geeksforgeeks</title>
</head>
<body style="width: 70%;">
<div id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active">
</li>
<li data-target="#carouselExampleIndicators"
data-slide-to="1">
</li>
<li data-target="#carouselExampleIndicators"
data-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"
alt="Second slide" />
</div>
<div class="carousel-item">
<img class="d-block w-100"
src=
"https://yt3.ggpht.com/ytc/AAUvwnjJqZG9PvGfC3GoV27UlohMeBLxyUdhs9hUbc-Agw=s900-c-k-c0x00ffffff-no-rj"
alt="First slide" />
</div>
<div class="carousel-item" id="image2">
<img class="d-block w-100"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
alt="Third slide" />
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleIndicators" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
//handle Bootstrap carousel slide event
$(".carousel").attr("data-interval", "100");
</script>
</body>
</html>
Producción
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA