WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Carrousel Bootstrap responsive
7,633
webleb
Ouvrir dans l'éditeur
Publiez votre code
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
