WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Carrousel Bootstrap responsive
6540
webleb
Publiez votre code
Recommandé
25 April 2023
Formulaire de connexion responsive
20 August 2024
Carrousel Soda aux fruits
index.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>
styles.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;"> */
main.js
Copy
Nothing to copy
