Bootstrap 5 proporciona Carousel, que es un componente de presentación de diapositivas para recorrer los elementos. Se puede incluir en la 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. Está construido con transformaciones CSS 3D y un poco de JavaScript.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 | Carousel </title> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"> </script> </head> <style> // Customizing the carousel for white background .carousel-indicators .active { background-color: green; } .carousel-indicators li { background-color: burlywood; } </style> <body style="text-align: center;"> <div class="container mt-3"> <h1 style="color: green;"> GeeksforGeeks </h1> <div id="GFG" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#GFG" data-slide-to="0" class="active"> </li> <li data-target="#GFG" data-slide-to="1"></li> <li data-target="#GFG" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" alt="GFG"> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190918234528/colorize1.png" alt="GFG"> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190918234815/colorize2.png" alt="GFG"> </div> </div> <a class="carousel-control-prev" href="#GFG" data-slide="prev"> <span class="carousel-control-prev-icon"> </span> </a> <a class="carousel-control-next" href="#GFG" data-slide="next"> <span class="carousel-control-next-icon"> </span> </a> </div> </div> </body> </html>
Producción:
Agregar títulos a las diapositivas: use .carousel-caption dentro de la clase .carousel-item para agregar títulos a la diapositiva.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title> Bootstrap 5 | Carousel </title> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"> </script> </head> <style> // Customizing the carousel for white background .carousel-indicators .active { background-color: green; } .carousel-indicators li { background-color: burlywood; } </style> <body style="text-align: center;"> <div class="container mt-3"> <h1 style="color: green;"> GeeksforGeeks </h1> <div id="GFG" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#GFG" data-slide-to="0" class="active"> </li> <li data-target="#GFG" data-slide-to="1"></li> <li data-target="#GFG" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" alt="GFG"> <div class="carousel-caption"> <h3 class="text-warning"> Image 1 </h3> </div> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190918234528/colorize1.png" alt="GFG"> <div class="carousel-caption"> <h3 class="text-warning"> Image 2 </h3> </div> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190918234815/colorize2.png" alt="GFG" /> <div class="carousel-caption"> <h3 class="text-warning"> Image 3 </h3> </div> </div> </div> <a class="carousel-control-prev" href="#GFG" data-slide="prev"> <span class="carousel-control-prev-icon"> </span> </a> <a class="carousel-control-next" href="#GFG" data-slide="next"> <span class="carousel-control-next-icon"> </span> </a> </div> </div> </body> </html><!DOCTYPE html> <html> <head> <title> Bootstrap 5 | Carousel </title> <!-- Load Bootstrap --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity= "sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity= "sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"> </script> </head> <style> // Customizing the carousel for white background .carousel-indicators .active { background-color: green; } .carousel-indicators li { background-color: burlywood; } </style> <body style="text-align: center;"> <div class="container mt-3"> <h1 style="color: green;"> GeeksforGeeks </h1> <div id="GFG" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#GFG" data-slide-to="0" class="active"> </li> <li data-target="#GFG" data-slide-to="1"></li> <li data-target="#GFG" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png" alt="GFG"> <div class="carousel-caption"> <h3 class="text-warning"> Image 1 </h3> </div> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190918234528/colorize1.png" alt="GFG"> <div class="carousel-caption"> <h3 class="text-warning"> Image 2 </h3> </div> </div> <div class="carousel-item"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190918234815/colorize2.png" alt="GFG" /> <div class="carousel-caption"> <h3 class="text-warning"> Image 3 </h3> </div> </div> </div> <a class="carousel-control-prev" href="#GFG" data-slide="prev"> <span class="carousel-control-prev-icon"> </span> </a> <a class="carousel-control-next" href="#GFG" data-slide="next"> <span class="carousel-control-next-icon"> </span> </a> </div> </div> </body> </html>
Producción: