En este artículo, veremos cómo crear una presentación de diapositivas de imágenes para su página web para que se vea más atractiva. Para ello, utilizaremos bootstrap Carousel .
Puede incluirse en su página web usando “bootstrap.js” o “bootstrap.min.js”. Los carruseles no se admiten correctamente en Internet Explorer, esto se debe a que utilizan transiciones y animaciones CSS3 para lograr el efecto de deslizamiento.
Así es como podemos crear una presentación de diapositivas de imágenes utilizando el carrusel de arranque.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap | Carousel</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <center> <h1 class="text-success">GeeksforGeeks</h1> <h4>Bootstrap | Carousel</h4> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- 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> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190603152813/ml_gaming.png"> </div> <div class="item"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190528184201/gateexam.png"> </div> <div class="item"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190507183137/Embedded-System-Programming-Languages.png"> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </center> </body> </html>
Producción:
La parte “Envoltorio para diapositivas”: Las diapositivas se especifican en un div con class=”carrusel-inner” . El contenido de cada imagen en una presentación de diapositivas se define en una etiqueta div con class= “item” . Esto puede ser texto o imágenes. El class=»active» se agrega a una de las diapositivas. De lo contrario, las imágenes de la presentación de diapositivas no serán visibles.
El div más externo: El class=”carrusel” nos dice que esta etiqueta div contiene un carrusel. El class=”carousel-slide” agrega una transición CSS y un efecto de animación a las imágenes, haciendo que se deslicen cuando se muestra un nuevo elemento. Si no quieres este efecto, entonces no pongas esta clase. El atributo data-ride=”carrusel” le dice a Bootstrap que comience la presentación de diapositivas inmediatamente cuando se carga la página.
La parte de «Indicadores»: Los indicadores son los pequeños puntos en la parte inferior de cada diapositiva que indican cuántas diapositivas hay y qué diapositiva estamos viendo actualmente. Los indicadores se especifican en una lista ordenada con class=”carousel-indicators” . El atributo de destino de datos apunta a la identificación del carrusel que se asigna a los números que aparecen en la presentación de diapositivas. El atributo data-slide-to hace que la imagen deslice la imagen a la que ha sido asignada al hacer clic en el punto específico.
La parte de “Controles izquierdo y derecho”: Este código añade botones “izquierdo” y “derecho” que nos permiten ir y venir entre las diapositivas de forma manual. El atributo de diapositiva de datos acepta las palabras clave «anterior» o «siguiente» , lo que cambia la posición de la diapositiva con respecto a su posición actual.
Para agregar un título a la diapositiva:
Agrega class=”carousel-caption” dentro de cada div class=”item” para crear un título para cada diapositiva.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap | Carousel</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script> </head> <body> <center> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- 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= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190603152813/ml_gaming.png"> <div class="carousel-caption"> <b> <h1 class="text-success"> GeeksforGeeks</h1> <p>Join Geeks Classes</p> </b> </div> </div> <div class="item"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190507183137/Embedded-System-Programming-Languages.png"> <div class="carousel-caption"> <b> <h1 class="text-primary"> GeeksforGeeks</h1> <p>Join Geeks Classes</p> </b> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </center> </body> </html>
Producción:
- CICLO: Recorre el carrusel de izquierda a derecha.
Ejemplo:
Javascript
<script type="text/javascript">
$(document).ready(function(){
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
});
</script>
- PAUSA: Evita que el carrusel se mueva donde quieras.
Ejemplo:
Javascript
<script type="text/javascript">
$(document).ready(function(){
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
});
</script>
- NÚMERO: Recorre el carrusel de acuerdo con un marco particular (comenzando desde 0, como en una array).
Ejemplo:
Javascript
<script type="text/javascript">
$(document).ready(function(){
$(".slide-three").click(function(){
$("#myCarousel").carousel(3);
});
});
</script>
- ANTERIOR: Cambia el carrusel a su imagen anterior, es como lo hicimos anteriormente en la parte de arranque.
Ejemplo:
Javascript
<script type="text/javascript">
$(document).ready(function(){
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
});
</script>
- SIGUIENTE: Cambia el carrusel a su siguiente imagen, es lo mismo que hicimos en la parte de arranque del carrusel.
Ejemplo:
Javascript
<script type="text/javascript">
$(document).ready(function(){
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
});
</script>
Navegadores compatibles:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por MrinalVerma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA