हिंडोला
तत्वों के माध्यम से साइकिल चलाने के लिए एक स्लाइड शो घटक—छवियों या पाठ की स्लाइड—कैरोसेल की तरह।
यह काम किस प्रकार करता है
हिंडोला सामग्री की एक श्रृंखला के माध्यम से साइकिल चलाने के लिए एक स्लाइड शो है, जिसे CSS 3D ट्रांसफ़ॉर्म और थोड़ी जावास्क्रिप्ट के साथ बनाया गया है। यह छवियों, टेक्स्ट या कस्टम मार्कअप की एक श्रृंखला के साथ काम करता है। इसमें पिछले/अगले नियंत्रणों और संकेतकों के लिए समर्थन भी शामिल है।
उन ब्राउज़रों में जहां पृष्ठ दृश्यता API समर्थित है, जब उपयोगकर्ता को वेबपृष्ठ दिखाई नहीं देता है (जैसे कि जब ब्राउज़र टैब निष्क्रिय होता है, ब्राउज़र विंडो छोटा होता है, आदि) तो हिंडोला फिसलने से बच जाएगा।
prefers-reduced-motion
मीडिया क्वेरी पर निर्भर है। हमारे एक्सेसिबिलिटी डॉक्यूमेंटेशन का रिड्यूस्ड मोशन सेक्शन देखें
।
कृपया ध्यान रखें कि नेस्टेड कैरोसेल समर्थित नहीं हैं, और कैरोसेल आमतौर पर एक्सेसिबिलिटी मानकों के अनुरूप नहीं होते हैं।
उदाहरण
हिंडोला स्वचालित रूप से स्लाइड आयामों को सामान्य नहीं करता है। जैसे, सामग्री को उचित आकार देने के लिए आपको अतिरिक्त उपयोगिताओं या कस्टम शैलियों का उपयोग करने की आवश्यकता हो सकती है। जबकि हिंडोला पिछले/अगले नियंत्रणों और संकेतकों का समर्थन करता है, वे स्पष्ट रूप से आवश्यक नहीं हैं। जैसा आप फिट देखते हैं वैसा ही जोड़ें और अनुकूलित करें।
.active
कक्षा को किसी एक स्लाइड में जोड़ने की आवश्यकता है अन्यथा हिंडोला दिखाई नहीं देगा। id
वैकल्पिक नियंत्रणों के लिए एक अद्वितीय सेट करना भी सुनिश्चित करें .carousel
, खासकर यदि आप एक पृष्ठ पर एकाधिक कैरोसेल का उपयोग कर रहे हैं। नियंत्रण और संकेतक तत्वों में एक data-bs-target
विशेषता (या href
लिंक के लिए) होनी चाहिए जो तत्व id
से मेल खाती हो .carousel
।
केवल स्लाइड
यहाँ केवल स्लाइड वाला हिंडोला है। ब्राउज़र डिफ़ॉल्ट छवि संरेखण को रोकने के लिए .d-block
और हिंडोला छवियों की उपस्थिति पर ध्यान दें ।.w-100
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
नियंत्रण के साथ
पिछले और अगले नियंत्रणों में जोड़ना। हम <button>
तत्वों का उपयोग करने की सलाह देते हैं, लेकिन आप <a>
के साथ तत्वों का भी उपयोग कर सकते हैं role="button"
।
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
संकेतकों के साथ
आप नियंत्रणों के साथ-साथ, हिंडोला में संकेतक भी जोड़ सकते हैं।
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
कैप्शन के साथ
.carousel-caption
किसी भी तत्व के साथ आसानी से अपनी स्लाइड में कैप्शन जोड़ें .carousel-item
। उन्हें छोटे व्यूपोर्ट पर आसानी से छिपाया जा सकता है, जैसा कि नीचे दिखाया गया है, वैकल्पिक प्रदर्शन उपयोगिताओं के साथ । हम उन्हें शुरू में छुपाते हैं .d-none
और उन्हें मध्यम आकार के उपकरणों पर वापस लाते हैं .d-md-block
।
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
क्रॉसफ़ेड
.carousel-fade
स्लाइड के बजाय फ़ेड ट्रांज़िशन के साथ स्लाइड को एनिमेट करने के लिए अपने हिंडोला में जोड़ें ।
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
व्यक्तिगत .carousel-item
अंतराल
अगले आइटम पर स्वचालित रूप से साइकिल चलाने के बीच विलंब के समय को बदलने के data-bs-interval=""
लिए a में जोड़ें ।.carousel-item
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" 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="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
स्पर्श स्वाइप अक्षम करें
हिंडोला स्लाइड के बीच स्थानांतरित करने के लिए टचस्क्रीन उपकरणों पर बाएं/दाएं स्वाइप करने का समर्थन करता है। data-bs-touch
इसे विशेषता का उपयोग करके अक्षम किया जा सकता है। data-bs-ride
नीचे दिए गए उदाहरण में भी विशेषता शामिल नहीं है और data-bs-interval="false"
इसलिए यह ऑटोप्ले नहीं करता है।
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" 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="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
डार्क वेरिएंट
गहरे रंग के नियंत्रणों, संकेतकों और कैप्शन .carousel-dark
के लिए जोड़ें । सीएसएस संपत्ति .carousel
के साथ उनके डिफ़ॉल्ट सफेद भरण से नियंत्रणों को उलट दिया गया है। filter
कैप्शन और नियंत्रण में अतिरिक्त Sass चर होते हैं जो color
और को अनुकूलित करते हैं background-color
।
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
कस्टम ट्रांजिशन
यदि आप संकलित CSS का उपयोग कर रहे हैं, तो संकलन या कस्टम शैलियों से पहले Sass चर के साथ की संक्रमण अवधि को .carousel-item
बदला जा सकता है । $carousel-transition-duration
यदि एकाधिक संक्रमण लागू होते हैं, तो सुनिश्चित करें कि परिवर्तन संक्रमण पहले परिभाषित किया गया है (उदाहरण के लिए transition: transform 2s ease, opacity .5s ease-out
)।
सास
चर
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-hover-opacity: .9;
$carousel-control-transition: opacity .15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: .5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity .6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: .6s;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
प्रयोग
डेटा विशेषताओं के माध्यम से
हिंडोला की स्थिति को आसानी से नियंत्रित करने के लिए डेटा विशेषताओं का उपयोग करें। data-bs-slide
खोजशब्दों को स्वीकार करता है prev
या next
, जो स्लाइड की स्थिति को उसकी वर्तमान स्थिति के सापेक्ष बदल देता है। वैकल्पिक रूप से, data-bs-slide-to
कैरोसेल में कच्चे स्लाइड इंडेक्स को पास करने के लिए उपयोग करें data-bs-slide-to="2"
, जो स्लाइड की स्थिति को से शुरू होने वाले किसी विशेष इंडेक्स में स्थानांतरित करता है 0
।
एट्रिब्यूट का data-bs-ride="carousel"
उपयोग कैरोसल को पेज लोड होने पर एनिमेटिंग के रूप में चिह्नित करने के लिए किया जाता है। यदि आप data-bs-ride="carousel"
अपने हिंडोला को प्रारंभ करने के लिए उपयोग नहीं करते हैं, तो आपको इसे स्वयं प्रारंभ करना होगा। इसका उपयोग (अनावश्यक और अनावश्यक) एक ही हिंडोला के स्पष्ट जावास्क्रिप्ट आरंभीकरण के संयोजन में नहीं किया जा सकता है।
जावास्क्रिप्ट के माध्यम से
कैरोसेल को इसके साथ मैन्युअल रूप से कॉल करें:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
विकल्प
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-bs-
, जैसा कि में है data-bs-interval=""
।
नाम | टाइप | चूक | विवरण |
---|---|---|---|
interval |
संख्या | 5000 |
किसी आइटम को स्वचालित रूप से साइकिल चलाने के बीच देरी के लिए समय की मात्रा। यदि false , हिंडोला स्वचालित रूप से चक्रित नहीं होगा। |
keyboard |
बूलियन | true |
कैरोसेल को कीबोर्ड इवेंट पर प्रतिक्रिया देनी चाहिए या नहीं। |
pause |
स्ट्रिंग | बूलियन | 'hover' |
अगर सेट किया जाता है स्पर्श-सक्षम उपकरणों पर, जब पर सेट किया जाता है |
ride |
स्ट्रिंग | बूलियन | false |
उपयोगकर्ता द्वारा पहले आइटम को मैन्युअल रूप से साइकिल करने के बाद हिंडोला ऑटोप्ले करता है। अगर पर सेट किया जाता है 'carousel' , तो लोड होने पर कैरोसेल अपने आप चलता है. |
wrap |
बूलियन | true |
क्या कैरोसेल को लगातार साइकिल चलाना चाहिए या हार्ड स्टॉप होना चाहिए। |
touch |
बूलियन | true |
क्या कैरोसल को टचस्क्रीन डिवाइस पर बाएं/दाएं स्वाइप इंटरैक्शन का समर्थन करना चाहिए। |
तरीकों
अतुल्यकालिक तरीके और संक्रमण
सभी एपीआई विधियाँ अतुल्यकालिक हैं और एक संक्रमण शुरू करती हैं । ट्रांज़िशन शुरू होते ही वे कॉलर के पास वापस आ जाते हैं लेकिन उसके समाप्त होने से पहले । इसके अलावा, एक संक्रमण घटक पर एक विधि कॉल को नजरअंदाज कर दिया जाएगा ।
आप कैरोसेल कंस्ट्रक्टर के साथ एक कैरोसेल इंस्टेंस बना सकते हैं, उदाहरण के लिए, अतिरिक्त विकल्पों के साथ इनिशियलाइज़ करने के लिए और आइटम्स के माध्यम से साइकिल चलाना शुरू करने के लिए:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
तरीका | विवरण |
---|---|
cycle |
हिंडोला आइटम के माध्यम से बाएं से दाएं साइकिल। |
pause |
हिंडोला को आइटम के माध्यम से साइकिल चलाने से रोकता है। |
prev |
पिछले आइटम के लिए साइकिल। पिछले आइटम को दिखाए जाने से पहले कॉलर को लौटाता है (उदाहरण के लिए, slid.bs.carousel घटना होने से पहले)। |
next |
अगले आइटम के लिए साइकिल। अगला आइटम दिखाए जाने से पहले कॉलर पर वापस आ जाता है (उदाहरण के लिए, slid.bs.carousel घटना होने से पहले)। |
nextWhenVisible |
जब पृष्ठ दिखाई नहीं दे रहा हो या हिंडोला या उसके पैरेंट दिखाई नहीं दे रहे हों, तो कैरोसेल को अगले पर न चलाएं। लक्ष्य आइटम दिखाए जाने से पहले कॉलर को लौटाता है |
to |
हिंडोला को एक विशेष फ्रेम (0 आधारित, एक सरणी के समान) पर साइकिल करता है। लक्ष्य आइटम दिखाए जाने से पहले कॉलर पर वापस आ जाता है (उदाहरण के लिए, slid.bs.carousel घटना होने से पहले)। |
dispose |
किसी तत्व के कैरोसेल को नष्ट कर देता है। (डीओएम तत्व पर संग्रहीत डेटा हटा देता है) |
getInstance |
स्टेटिक विधि जो आपको डीओएम तत्व से जुड़े कैरोसेल इंस्टेंस प्राप्त करने की अनुमति देती है, आप इसे इस तरह उपयोग कर सकते हैं:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
स्टेटिक विधि जो एक डोम तत्व से जुड़े कैरोसेल इंस्टेंस को लौटाती है या यदि इसे प्रारंभ नहीं किया गया था तो एक नया बनाएं। आप इसे इस तरह इस्तेमाल कर सकते हैं:bootstrap.Carousel.getOrCreateInstance(element) |
आयोजन
बूटस्ट्रैप का हिंडोला वर्ग हिंडोला कार्यक्षमता में हुक करने के लिए दो घटनाओं को उजागर करता है। दोनों घटनाओं में निम्नलिखित अतिरिक्त गुण हैं:
direction
: हिंडोला जिस दिशा में खिसक रहा है (या तो"left"
या"right"
)।relatedTarget
: DOM तत्व जिसे सक्रिय आइटम के रूप में जगह में खिसकाया जा रहा है।from
: वर्तमान वस्तु का सूचकांकto
: अगले आइटम का सूचकांक
सभी हिंडोला ईवेंट कैरोसेल पर ही (अर्थात <div class="carousel">
) पर फ़ायर किए जाते हैं.
घटना प्रकार | विवरण |
---|---|
slide.bs.carousel |
slide इंस्टेंस विधि लागू होने पर तुरंत आग लगती है। |
slid.bs.carousel |
कैरोसेल द्वारा अपना स्लाइड ट्रांज़िशन पूरा कर लेने पर सक्रिय किया गया। |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})