कॅरोसेल
घटकांद्वारे सायकल चालवण्यासाठी स्लाइडशो घटक—प्रतिमा किंवा मजकूराच्या स्लाइड्स—कॅरोसेलसारखे.
हे कसे कार्य करते
कॅरोसेल हा CSS 3D ट्रान्सफॉर्म्स आणि थोडा JavaScript सह तयार केलेल्या सामग्रीच्या मालिकेद्वारे सायकलिंगसाठी एक स्लाइड शो आहे. हे प्रतिमा, मजकूर किंवा सानुकूल मार्कअपच्या मालिकेसह कार्य करते. यात मागील/पुढील नियंत्रणे आणि निर्देशकांसाठी समर्थन देखील समाविष्ट आहे.
ब्राउझरमध्ये जेथे पृष्ठ दृश्यमानता 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>
सानुकूल संक्रमण
जर तुम्ही संकलित 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"
तुम्ही तुमचे कॅरोसेल सुरू करण्यासाठी वापरत नसल्यास , तुम्हाला ते स्वतः सुरू करावे लागेल. हे समान कॅरोसेलच्या (अनावश्यक आणि अनावश्यक) स्पष्ट JavaScript इनिशिएलायझेशनसह संयोजनात वापरले जाऊ शकत नाही.
JavaScript द्वारे
यासह कॅरोसेलला मॅन्युअली कॉल करा:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
पर्याय
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-bs-
प्रमाणे जोडा data-bs-interval=""
.
नाव | प्रकार | डीफॉल्ट | वर्णन |
---|---|---|---|
interval |
संख्या | 5000 |
एखादी वस्तू आपोआप सायकल चालवण्यामध्ये विलंब लागणारा वेळ. जर false , कॅरोसेल आपोआप सायकल चालवणार नाही. |
keyboard |
बुलियन | true |
कॅरोसेलने कीबोर्ड इव्हेंटवर प्रतिक्रिया द्यावी की नाही. |
pause |
स्ट्रिंग | बुलियन | 'hover' |
वर सेट केल्यास टच-सक्षम डिव्हाइसेसवर, वर सेट केल्यावर , स्वयंचलितपणे पुन्हा सुरू होण्यापूर्वी |
ride |
स्ट्रिंग | बुलियन | false |
वापरकर्त्याने प्रथम आयटम मॅन्युअली सायकल केल्यानंतर कॅरोसेल ऑटोप्ले करते. वर सेट केल्यास 'carousel' , लोडवर कॅरोसेल ऑटोप्ले करते. |
wrap |
बुलियन | true |
कॅरोसेलने सतत सायकल चालवली पाहिजे की कठीण थांबे आहेत. |
touch |
बुलियन | true |
टचस्क्रीन डिव्हाइसेसवर कॅरोसेलने डावीकडे/उजवीकडे स्वाइप परस्परसंवादांना समर्थन द्यावे की नाही. |
पद्धती
असिंक्रोनस पद्धती आणि संक्रमणे
सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .
तुम्ही कॅरोसेल कन्स्ट्रक्टरसह कॅरोसेल उदाहरण तयार करू शकता, उदाहरणार्थ, अतिरिक्त पर्यायांसह प्रारंभ करण्यासाठी आणि आयटममधून सायकल चालवणे सुरू करा:
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 |
स्टॅटिक पद्धत जी तुम्हाला डीओएम घटकाशी संबंधित कॅरोसेल उदाहरण मिळवू देते, तुम्ही ते याप्रमाणे वापरू शकता: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...
})