WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Carrusel Bootstrap responsivo
7,276
webleb
Abrir en el editor
Publica tu código
5
HTML
Copy
<!doctype html> <html lang="en"> <head> <title>Webleb</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS v5.2.1 --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> <style> html, body { overflow-x: hidden; } </style> </head> <body style="height: 100%; min-height: 100vh;"> <div class="row"> <div id="carouselId" class="carousel slide" data-bs-ride="carousel" > <ol class="carousel-indicators"> <li data-bs-target="#carouselId" data-bs-slide-to="0" class="active" aria-current="true" aria-label="First slide"></li> <li data-bs-target="#carouselId" data-bs-slide-to="1" aria-label="Second slide"></li> <li data-bs-target="#carouselId" data-bs-slide-to="2" aria-label="Third slide"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img src="/img/s1.png" class="w-100 d-block" alt="First slide"> </div> <div class="carousel-item"> <img src="/img/s2.png" class="w-100 d-block" alt="Second slide" > </div> <div class="carousel-item"> <img src="/img/s3.png" class="w-100 d-block" alt="Third slide" > </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselId" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselId" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div> <div> <div class="row justify-content-center" style="text-align: center; margin: 50px;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit tristique libero, vel imperdiet turpis pellentesque vel. Vestibulum mollis hendrerit nisi, sed consectetur nunc mattis at. Nulla in lacinia lacus. Morbi venenatis, nisl eu mollis accumsan, velit velit placerat velit, ut congue est enim vel quam. Duis luctus diam eu purus fermentum ultricies. Sed feugiat gravida justo, id tristique sapien tristique in. Nullam eu lectus vitae quam rutrum scelerisque. Sed vel mauris non enim tempor placerat sed sit amet velit. Aliquam in libero vel nulla malesuada tincidunt vitae ac tellus. Donec sed faucibus turpis. Integer pharetra dolor eget elit cursus tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit tristique libero, vel imperdiet turpis pellentesque vel. Vestibulum mollis hendrerit nisi, sed consectetur nunc mattis at. Nulla in lacinia lacus. Morbi venenatis, nisl eu mollis accumsan, velit velit placerat velit, ut congue est enim vel quam. Duis luctus diam eu purus fermentum ultricies. Sed feugiat gravida justo, id tristique sapien tristique in. Nullam eu lectus vitae quam rutrum scelerisque. Sed vel mauris non enim tempor placerat sed sit amet velit. Aliquam in libero vel nulla malesuada tincidunt vitae ac tellus. Donec sed faucibus turpis. Integer pharetra dolor eget elit cursus tristique. </p> </div> </div> </div> </div> <!-- Bootstrap JavaScript Libraries --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"> </script> </body> </html>
CSS
Copy
/* 1- Images in this code should be changed by your images, change the path in src="/img/s3.png". 2- To edit the height of the carousel and images, you can aply the height attribute to the carousel <div id="carouselId" class="carousel slide" data-bs-ride="carousel" style="height: 300px;"> or to the image: <img src="/img/s1.png" class="w-100 d-block" alt="First slide" height="400px;"> */
JS
Copy
Nothing to copy
