जब हम कैरोसेल के बारे में सोचते हैं, तो आमतौर पर मन में वह मनोरंजन पार्क की सवारी आती है जिस पर आप बचपन में सवार हुए होंगे - एक बड़ा प्लेटफॉर्म जो घूमता है रंगीन मेरी-गो-राउंड घोड़ों के साथ जो सवारी के आगे बढ़ने पर ऊपर-नीचे जाते हैं।
बूटस्ट्रैप कैरोसेल वह मजेदार मेले वाला प्रकार नहीं है जिसे हम बचपन से जानते आए हैं, लेकिन अवधारणा में समानताएं हैं। यह लेख बूटस्ट्रैप के साथ शुरुआत करने की समीक्षा करता है, कैरोसेल UI एलिमेंट क्या है, इसका उपयोग कब करना अच्छा होगा, और बूटस्ट्रैप फ्रेमवर्क का उपयोग करके इसे कैसे बनाया जाए, इस पर चर्चा करता है।
शुरुआत करना
बूटस्ट्रैप कैरोसेल सेट अप करने के लिए पहली चीज़ जो हमें करने की आवश्यकता है, वह है यह सुनिश्चित करना कि हमारे पास उचित निर्भरताएं हैं। इसके लिए हमें बूटस्ट्रैप, PopperJS, और jQuery की आवश्यकता है। अपने प्रोजेक्ट में अपनी निर्भरताएं जोड़ने में सहायता के लिए बूटस्ट्रैप के क्विक स्टार्ट पेज पर एक नज़र डालें।
यह आपका निर्णय है कि आप निर्भरता आवश्यकता को कैसे संभालते हैं, लेकिन सबसे आसान, अधिक शुरुआती-अनुकूल तरीका है jQuery, Popper.js, और बूटस्ट्रैप के लिए कंटेंट डिलीवरी नेटवर्क - CDN का उपयोग करना। अपने <script> टैग्स के क्रम से सावधान रहें - यहां क्रम मायने रखता है।
अब आप शुरू करने के लिए तैयार हैं!
कैरोसेल बनाने के लिए बूटस्ट्रैप डॉक्यूमेंटेशन का उपयोग करना
Introduction/Getting Started पेज के बाईं ओर, आप एक साइडबार देखते हैं जो विभिन्न चीजों से लिंक करता है। Components लिंक देखें और उस पर क्लिक करें। यह आपको बूटस्ट्रैप के कई उपलब्ध घटकों में से पहले पर नेविगेट करेगा: Alerts। यदि हम साइडबार को फिर से देखते हैं, तो यह अब हमें उपलब्ध सभी विभिन्न घटकों के विभिन्न लिंक दिखाता है।
Carousel घटक पर क्लिक करके शुरू करें। इसमें वह जानकारी होगी जिसकी हमें आवश्यकता है।
यह कैसे काम करता है
बूटस्ट्रैप CSS ट्रांसफॉर्म प्रॉपर्टी और कुछ JavaScript का लाभ उठाता है ताकि कैरोसेल को संचालित किया जा सके जब यह एक स्लाइड से अगली स्लाइड पर जाता है। सबसे बुनियादी कैरोसेल छवियों या मार्कअप की एक श्रृंखला है जो एक निर्धारित समय के बाद एक से दूसरी पर जाती है।
बुनियादी संरचना
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bootstrap Navbar</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Bootcamps </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Popular Bootcamps</a> <a class="dropdown-item" href="#">Bootcamp Prep</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Bootcamp Financing</a> <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Coding </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Coding Tools</a> <a class="dropdown-item" href="#">Git</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">HTML</a> <a class="dropdown-item" href="#">CSS</a> <a class="dropdown-item" href="#">JS</a> <a class="dropdown-item" href="#">Python</a> <a class="dropdown-item" href="#">Ruby</a> <a class="dropdown-item" href="#">C++</a> <a class="dropdown-item" href="#">Java</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Career Resources </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item smallcaps" href="#">Career Advice</a> <a class="dropdown-item smallcaps" href="#">Interviews</a> <div class="dropdown-divider"></div> <a class="dropdown-item smallcaps" href="#">Tech Cities</a> <a class="dropdown-item smallcaps" href="#">Tech Salaries</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tech Fields </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Web Design</a> <a class="dropdown-item" href="#">Web Development</a> <a class="dropdown-item" href="#">Software Engineering</a> <a class="dropdown-item" href="#">Data Science</a> </div> </li> <li class="nav-item"> <a class="nav-link smallcaps" href="#">News & Commentary</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"><img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="..."> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html>
यहां कुछ एट्रिब्यूट्स दिए गए हैं जो आपको नए लग सकते हैं और उनके अर्थ:
| एट्रिब्यूट | अर्थ |
|---|---|
| data-ride="carousel" | पेज लोड पर एनिमेट करता है। |
| data-interval="false | [ms में संख्या]" | यदि false पर सेट है, तो कैरोसेल स्वचालित रूप से साइकिल नहीं करता। अन्यथा, यह मिलीसेकंड में संख्या के आधार पर साइकिल करता है। |
| data-pause="hover" | जब उपयोगकर्ता कैरोसेल पर होवर करता है, तो कैरोसेल वर्तमान सक्रिय छवि पर रुक जाएगा। माउस लीव पर, कैरोसेल साइक्लिंग प्रक्रिया फिर से शुरू करेगा। |
| class="active" | कौन सी छवि दिखानी है यह जानने के लिए एक्टिव आवश्यक है। |
| class="d-block" | display: block; |
| class="w-100" | width: 100%; |
कंट्रोल्स के साथ
इस बुनियादी साइक्लिंग संरचना के अलावा, बूटस्ट्रैप घटक के लिए कैरोसेल कंट्रोल्स प्रदान करता है। यहीं पर बल्क JavaScript खेल में आता है। बूटस्ट्रैप अपने JavaScript यूटिल फंक्शन्स का उपयोग करके कैरोसेल को संचालित करता है जब उपयोगकर्ता कंट्रोल्स पर क्लिक करता है।
नीचे दिए गए कोड स्निपेट में, आप छवि के दोनों ओर एक पिछला और एक अगला तीर देखेंगे। टाइमर पर पहले की तरह संचालन करने के अलावा, छवि तब बदलेगी जब उपयोगकर्ता तीरों में से किसी एक पर क्लिक करेगा।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bootstrap Navbar</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Bootcamps </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Popular Bootcamps</a> <a class="dropdown-item" href="#">Bootcamp Prep</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Bootcamp Financing</a> <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Coding </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Coding Tools</a> <a class="dropdown-item" href="#">Git</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">HTML</a> <a class="dropdown-item" href="#">CSS</a> <a class="dropdown-item" href="#">JS</a> <a class="dropdown-item" href="#">Python</a> <a class="dropdown-item" href="#">Ruby</a> <a class="dropdown-item" href="#">C++</a> <a class="dropdown-item" href="#">Java</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Career Resources </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item smallcaps" href="#">Career Advice</a> <a class="dropdown-item smallcaps" href="#">Interviews</a> <div class="dropdown-divider"></div> <a class="dropdown-item smallcaps" href="#">Tech Cities</a> <a class="dropdown-item smallcaps" href="#">Tech Salaries</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tech Fields </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Web Design</a> <a class="dropdown-item" href="#">Web Development</a> <a class="dropdown-item" href="#">Software Engineering</a> <a class="dropdown-item" href="#">Data Science</a> </div> </li> <li class="nav-item"> <a class="nav-link smallcaps" href="#">News & Commentary</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html>
कंट्रोल्स के काम करने के तरीके के बारे में समझने वाली बड़ी बात यह है कि href को कैरोसेल के समग्र डिव के यूनिक id से मेल खाना चाहिए।
अगला कंट्रोल:
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
कैरोसेल का आउटमोस्ट कंटेनर:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
हाइलाइट किए गए क्षेत्रों को कंट्रोल्स के काम करने के लिए मेल खाना चाहिए।
इंडिकेटर्स के साथ
कैरोसेल की साइक्लिंग को संचालित करने के लिए कंट्रोल्स का उपयोग करने के अलावा, आप यह दर्शा सकते हैं कि आप किस छवि पर हैं यह दिखाकर कि आपके कैरोसेल में कितने ब्लॉक एलिमेंट्स हैं। इनका उपयोग कंट्रोल्स के साथ संयोजन में किया जा सकता है।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Bootstrap Navbar</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#"><img width="150" src="https://d30vrbc6r9jj52.cloudfront.net/web-illustrations/layout/ck_logo.png" /></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Bootcamps </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Popular Bootcamps</a> <a class="dropdown-item" href="#">Bootcamp Prep</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Bootcamp Financing</a> <a class="dropdown-item" href="#">Bootcamp Grads and Alumni</a> </div> </li> <li class="nav-item dropdown">lid <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Coding </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Coding Tools</a> <a class="dropdown-item" href="#">Git</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">HTML</a> <a class="dropdown-item" href="#">CSS</a> <a class="dropdown-item" href="#">JS</a> <a class="dropdown-item" href="#">Python</a> <a class="dropdown-item" href="#">Ruby</a> <a class="dropdown-item" href="#">C++</a> <a class="dropdown-item" href="#">Java</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Career Resources </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item smallcaps" href="#">Career Advice</a> <a class="dropdown-item smallcaps" href="#">Interviews</a> <div class="dropdown-divider"></div> <a class="dropdown-item smallcaps" href="#">Tech Cities</a> <a class="dropdown-item smallcaps" href="#">Tech Salaries</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle smallcaps" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tech Fields </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Web Design</a> <a class="dropdown-item" href="#">Web Development</a> <a class="dropdown-item" href="#">Software Engineering</a> <a class="dropdown-item" href="#">Data Science</a> </div> </li> <li class="nav-item"> <a class="nav-link smallcaps" href="#">News & Commentary</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000" data-pause="hover"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2581&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1499854413229-6d1c92ff39ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3404&q=80" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="https://images.unsplash.com/photo-1532377541606-76e67ceb59a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html>
उपरोक्त कोड स्निपेट में ऑर्डर्ड लिस्ट वही है जो इंडिकेटर्स प्रदर्शित करती है। .active क्लास carousel-items में एक्टिव क्लास से मेल खाता है।
निष्कर्ष
पहली नज़र में यह बहुत सारी जानकारी पचाने जैसा लग सकता है। याद रखने वाली मुख्य बात यह है कि बस डॉक्यूमेंटेशन का पालन करें। जब डॉक्यूमेंटेशन इतना अच्छी तरह से लिखा गया और विस्तृत है तो इसे याद करने की कोई आवश्यकता नहीं है।
यह निश्चित रूप से एक अच्छा विचार है कि आप बूटस्ट्रैप के अंत में सब कुछ कैसे काम करता है, इसके बारे में जानते हों - यदि आपके पास समय है तो उस मिनिफाइड CSS और JS फाइल पर एक नज़र डालें कि उन्होंने बूटस्ट्रैप में एलिमेंट्स को कैसे स्टाइल और स्क्रिप्ट किया है। साथ ही, उदाहरण कोड में सभी एट्रिब्यूट्स का क्या अर्थ है, इसके बारे में कम से कम जानते हों ताकि आप इसे अपनी आवश्यकताओं के अनुसार अनुकूलित कर सकें और अपने प्रोजेक्ट में इसका उपयोग कर सकें।
एक अंतिम बात: ध्यान रखें कि कैरोसेल घटक पहुंच के मामले में उपयोग करने के लिए सबसे अच्छा नहीं हो सकता है। सुनिश्चित करें कि आप अपने पेज को यथासंभव सुलभ बनाना जारी रखें और अपने कैरोसेल में ऐसी जानकारी न रखें जो कहीं और भी न मिल सके।
बूटस्ट्रैप का उपयोग करने की आपकी यात्रा के लिए शुभकामनाएं!