हिंडोळ
घटकां मदल्यान सायकल करपा खातीर स्लाइडशो घटक-मजकूराचीं प्रतिमा वा स्लाइड-हिंडोला सारको.
कशें काम करता
हिंडोळ हो सामुग्री माळेंतल्यान सायकल करपा खातीर स्लाइडशो आसा, जो 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
CSS गुणधर्मान उलटयल्यांत. कॅप्शन आनी नियंत्रणांत अतिरिक्त 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 चडांत चड बदलूं येता वा तुमी संकलित केल्लो CSS वापरतात जाल्यार सानुकूल शैलींचो संक्रमण काळ .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 |
एकाद्र्या घटकाचें हिंडोळ नश्ट करता. (DOM घटकाचेर सांठयल्लो डेटा काडून उडयता) |
getInstance |
स्थिर पद्दत जी तुमकां DOM घटकाकडेन संबंदीत आशिल्ली हिंडोळ दृष्टांत मेळोवपाक परवानगी दिता, तुमी ती अशे तरेन वापरूं येता:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
स्थिर पद्दत जी DOM घटकाक संबंदीत आशिल्ली हिंडोळ दृष्टांत परत दिता वा ती आरंभ करूंक नाशिल्ल्या प्रकरणांत नवी तयार करता. तुमी ताचो वापर अशे तरेन करूंक शकतात: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...
})