WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
रिस्पॉन्सिव बूटस्ट्रैप कैरोसेल
6537
webleb
अपना कोड प्रकाशित करें
22 June 2025
टेलविंड सीएसएस ब्लॉग टेम्पलेट: डार्क मोड, रिस्पॉन्सिव
14 September 2024
सिंक्रोनाइज्ड स्लाइडर्स के साथ पोर्टफोलियो कैरोसेल
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
