हिंडोला
तत्वें दे माध्यम कन्नै साइकिलिंग आस्तै इक स्लाइड शो घटक-पाठ दी छवियां जां स्लाइड्स-जि’यां हिंडोला।
किवें कम्म करदा है
हिंडोला सामग्री दी इक श्रृंखला दे माध्यम कन्नै साइकिलिंग आस्तै इक स्लाइड शो ऐ, जेह् ड़ा CSS 3D रूपांतरणें ते जावास्क्रिप्ट दे थोह् ड़ी-मती कन्नै बनाया गेदा ऐ। एह् छवियां, पाठ, जां कस्टम मार्कअप दी इक श्रृंखला कन्नै कम्म करदा ऐ। इस च पिछले/अगले नियंत्रण ते संकेतकें लेई समर्थन बी शामल ऐ।
ब्राउज़रें च जित्थै पृष्ठ दृश्यता एपीआई समर्थत ऐ, हिंडोला उस बेल्लै स्लाइड होने थमां बचग जिसलै वेबपेज बरतूनी गी नेईं दिक्खेआ जंदा ऐ (जिऱयां ब्राउज़र टैब निष्क्रिय होने पर, ब्राउज़र विंडो गी घट्ट शा घट्ट कीता जंदा ऐ, बगैरा)।
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=""
आस्तै इक च जोड़ो ।.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
च जोड़ो । नियंत्रणें गी CSS गुण .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>
कस्टम संक्रमण करना
दी संक्रमण अवधि गी संकलन करने शा पैह् ले Sass चर .carousel-item
कन्नै बदली सकदा ऐ $carousel-transition-duration
जां कस्टम शैलियां जेकर तुस संकलित CSS दा इस्तेमाल करा करदे ओ. जेकर मते सारे संक्रमण लागू कीते जंदे न तां सुनिश्चत करो जे रूपांतरण संक्रमण गी पैह् ले परिभाशत कीता गेआ ऐ (जियां 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 |
क्या हिंडोला गी टचस्क्रीन डिवाइस पर बाएं/दाएं स्वाइप इंटरैक्शनें गी समर्थन करना चाहिदा ऐ जां नेईं। |
विधियां
एसिंक्रोनस तरीके ते संक्रमण
सारे एपीआई तरीके एसिंक्रोनस न ते इक संक्रमण शुरू करदे न . संक्रमण शुरू होने दे बाद गै ओह् काल करने आह् ले कोल वापस औंदे न पर खत्म होने थमां पैह् ले . इसदे अलावा, इक संक्रमण घटक पर इक विधि काल गी अनदेखा कीता जाग .
होर मती जानकारी आस्तै साढ़े जावास्क्रिप्ट दस्तावेज़ीकरण दिक्खो .
You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Method | Description |
---|---|
cycle |
Cycles through the carousel items from left to right. |
pause |
Stops the carousel from cycling through items. |
prev |
Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.bs.carousel event occurs). |
next |
Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.bs.carousel event occurs). |
nextWhenVisible |
Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. Returns to the caller before the target item has been shown |
to |
Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.bs.carousel event occurs). |
dispose |
Destroys an element's carousel. (Removes stored data on the DOM element) |
getInstance |
Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: bootstrap.Carousel.getOrCreateInstance(element) |
Events
Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:
direction
: The direction in which the carousel is sliding (either"left"
or"right"
).relatedTarget
: The DOM element that is being slid into place as the active item.from
: The index of the current itemto
: The index of the next item
All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">
).
Event type | Description |
---|---|
slide.bs.carousel |
Fires immediately when the slide instance method is invoked. |
slid.bs.carousel |
Fired when the carousel has completed its slide transition. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})