WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Responsive Bootstrap Carousel
6870
webleb
Publish Your Code
Recommended
1 March 2025
Admin Dashboard clean and responsive
17 August 2024
Bootstrap Navbar Template
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
