हिंडोळ
घटकां मदल्यान सायकल करपा खातीर स्लाइडशो घटक-मजकूराचीं प्रतिमा वा स्लाइड-हिंडोला सारको.
कशें काम करता
हिंडोळ हो सामुग्री माळेंतल्यान सायकल करपा खातीर स्लाइडशो आसा, जो CSS 3D रुपांतरां आनी थोड्या जावास्क्रिप्टान तयार केला. तो प्रतिमा, मजकूर वा सानुकूल मार्कअप हांची माळ घेवन काम करता. तशेंच आदल्या/फुडल्या नियंत्रणां खातीर आनी निर्देशकां खातीर आदार आसपावीत केला.
ज्या ब्राउझरांत पृष्ठ दृश्यताय API समर्थीत आसा, जेन्ना वेबपान वापरप्याक दिसना (देखीक जेन्ना ब्राउझर टॅब निश्क्रीय आसता, ब्राउझर विंडो उणी जाता, आदी) तेन्ना हिंडोळ सरकप टाळटलें.
ह्या घटकाचो एनिमेशन परिणाम prefers-reduced-motion
माध्यम क्वेरीचेर आदारून आसता. आमच्या सुलभताय दस्तावेजीकरणाचो उणो केल्ली गती विभाग पळयात .
उपकार करून लक्षांत दवरात की नेस्टेड हिंडोळां समर्थीत नात, आनी हिंडोला सादारणपणान सुलभताय मानकांक पाळो दिना.
निमाणें, तुमी आमची जावास्क्रिप्ट स्त्रोतांतल्यान तयार करतात जाल्यार, ताका जायutil.js
.
उदारण
हिंडो आपोआप स्लाइड परिमाण सामान्य करिनात. अशे तरेन, तुमकां सामुग्रीचो योग्य आकार दिवपाक अतिरिक्त उपयुक्तताय वा सानुकूल शैली वापरच्यो पडटल्यो. हिंडोळ फाटल्या/फुडल्या नियंत्रणांक आनी निर्देशकांक तेंको दिता आसतना, तांची स्पश्ट गरज ना. तुमकां योग्य दिसता तशें जोडचें आनी पसंतीचें करचें.
.active
वर्ग एका स्लाइडांत जोडपाची गरज आसा नाजाल्यार हिंडोळो दिसचो ना. तशेंच पर्यायी नियंत्रणां खातीर एक खाशेलो id सेट करपाची खात्री करात .carousel
, खास करून तुमी एकाच पानाचेर जायते हिंडोळ वापरतात जाल्यार. नियंत्रण आनी निर्देशक घटकांक घटकाच्या id कडेन जुळपी data-target
गुणधर्म (वा दुव्यां खातीर) आसपाक जाय.href
.carousel
फकत स्लाइड्स
हांगा फकत स्लाइड आशिल्ली हिंडोळो आसा. ब्राउझर मुलभूत प्रतिमा संरेखण आडावपाक हिंडोला प्रतिमांचेर .d-block
आनी हांची उपस्थिती लक्षांत दवरात ..w-100
नियंत्रणां सयत
फाटल्या आनी फुडल्या नियंत्रणांत जोडप:
निर्देशकां सयत
तुमी हिंडोळाक निर्देशकय जोडूंक शकतात, नियंत्रणां वांगडा,य.
कॅप्शनां सयत
.carousel-caption
खंयच्याय .carousel-item
. _ ते ल्हान दृश्यपोर्टांचेर सहजपणान लिपोवंक शकतात, सकयल दाखयल्ले प्रमाणें, पर्यायी प्रदर्शन उपयुक्तताय . आमी सुरवेक तांकां लिपयतात .d-none
आनी तांकां परतून मध्यम आकाराच्या साधनांचेर हाडटात .d-md-block
.
क्रॉसफेड करप
.carousel-fade
स्लाइड बदला फेड ट्रांझिशनान स्लाइड एनिमेट करपाक तुमच्या हिंडोलात जोडात .
वैयक्तीक .carousel-item
अंतर
फुडल्या आयटमाक आपसूक सायकल चलोवपा मदीं कळाव करपाचो वेळ बदलपाक data-interval=""
a कडेन जोडात ..carousel-item
वापर
डेटा गुणधर्मां वरवीं
हिंडोलाची सुवात सहजपणान नियंत्रीत करपाक डेटा गुणधर्म वापरात. data-slide
कीवर्ड स्वीकारता prev
वा next
, जे स्लाइड स्थिती ताच्या सद्याच्या स्थितीच्या सापेक्ष बदलता. पर्यायीपणान, वापरात data-slide-to
एक कच्चो स्लाइड अनुक्रमणिका हिंडोळाक पास करपाक data-slide-to="2"
, जो स्लाइड स्थिती पासून सुरू जावपी एका खाशेल्या निर्देशांकांत स्थलांतरीत करता 0
.
data-ride="carousel"
पान लोड जावपाचेर सुरू जावपी हिंडोला एनिमेट म्हणून चिन्न करपाखातीर गुणधर्म वापरतात . तुमी तुमच्या हिंडोळाक आरंभ करपाक वापरनात जाल्यार तुमकां data-ride="carousel"
स्वता आरंभ करचें पडटलें. एकाच हिंडोळ्याच्या (अनावश्यक आनी गरजे भायर) स्पश्ट जावास्क्रिप्ट आरंभीकरणा वांगडा ताचो वापर करूंक मेळना.
जावास्क्रिप्ट वरवीं
हिंडोळाक हाताळणीन कॉल करात:
पर्याय आसात
पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-
, जशें data-interval=""
.
नांव | प्रकार | डिफॉल्ट | वर्णन |
---|---|---|---|
अंतरांत आसता | आंकडो | ५००० इतले आसात | आपोआप वस्तू सायकल चलोवपा मदीं कळाव करपाचो वेळ. खोटें आसल्यार हिंडो आपोआप सायकल चलचो ना. |
कीबोर्ड वापरतात | बूलियन हें नांव | खरें | कीबोर्ड घडणुकांचेर हिंडोळान प्रतिक्रिया दिवची काय ना. |
रावप | तार | बूलियन हें नांव | "होवर" हें . | जर सेट केल्यार स्पर्श-सक्षम डिव्हायसांचेर, जेन्ना सेट केला |
रपेट | माळ | फट | वापरपी पयली वस्तू हाताळणी करून सायकल केल्या उपरांत हिंडोला स्वयंचलीत करता. "हिंडोला" आसल्यार, लोडाचेर हिंडोळो ऑटोप्ले करता. |
गुठलावप | बूलियन हें नांव | खरें | हिंडोला सतत सायकल चलोवपाक जाय काय कठीण थांबपाक जाय. |
स्पर्श | बूलियन हें नांव | खरें | टचस्क्रीन डिव्हायसांचेर हिंडोला डाव्या/उजव्या स्वाइप परस्पर क्रियांक तेंको दिवपाक जाय काय ना. |
पद्दती
अतुल्यकालिक पद्दती आनी संक्रमण
सगळ्यो एपीआय पद्दती अतुल्यकालिक आसतात आनी संक्रमण सुरू करतात . संक्रमण सुरू जातकच पूण सोंपचे पयलीं ते फोन करप्या कडेन परततात . ते भायर, संक्रमण घटकाचेर एक पद्दत कॉल दुर्लक्षीत जातलें .
.carousel(options)
एक पर्यायी पर्यायां सयत हिंडोला आरंभ करता object
आनी आयटमांतल्यान सायकल चलोवंक सुरवात करता.
.carousel('cycle')
हिंडोळाच्या वस्तूंतल्यान डाव्यान उजव्यान सायकल करता.
.carousel('pause')
वस्तूंतल्यान सायकल चलोवपी हिंडोळाक आडायता.
.carousel(number)
हिंडोलाक एका विशिश्ट फ्रेमाक (0 आदारीत, ऍरे सारकें) चक्र करता. लक्ष्य आयटम दाखोवचे पयलीं (म्हळ्यार घडणूक घडचे पयलीं) कॉलराक परतता .slid.bs.carousel
.carousel('prev')
फाटल्या वस्तू कडेन चक्रां करता. आदली वस्त दाखोवचे पयलीं (म्हळ्यार slid.bs.carousel
घडणूक घडचे पयलीं) कॉलराक परतता.
.carousel('next')
फुडल्या आयटमा कडेन चक्रां करता. फुडली वस्त दाखोवचे पयलीं (म्हळ्यार slid.bs.carousel
घडणूक घडचे पयलीं) कॉलराक परतता.
.carousel('dispose')
एकाद्र्या घटकाचें हिंडोळ नश्ट करता.
.carousel('nextWhenVisible')
जेन्ना पान दिसना वा हिंडोळो वा ताचो पालक दिसना तेन्ना हिंडोला फुडें सायकल करचो न्हय. फुडली वस्त दाखोवचे पयलीं (म्हळ्यार slid.bs.carousel
घडणूक घडचे पयलीं) कॉलराक परतता.
.carousel('to')
हिंडोलाक एका विशिश्ट फ्रेमाक (0 आदारीत, ऍरे सारकें) चक्र करता. फुडली वस्त दाखोवचे पयलीं (म्हळ्यार slid.bs.carousel
घडणूक घडचे पयलीं) कॉलराक परतता.
घडणुको
बूटस्ट्रॅपाचो हिंडोला वर्ग हिंडोला कार्यक्षमतायांत हुक करपा खातीर दोन घडणुको उक्ती करता. दोनूय घडणुकांक फुडले अतिरिक्त गुणधर्म आसात:
direction
: हिंडोला खंयचे दिकेन सरकता (एक तर"left"
वा"right"
).relatedTarget
: सक्रिय आयटम म्हणून जाग्यार सरकयल्लो DOM घटक.from
: सद्याच्या वस्तूचो अनुक्रमणिकाto
: फुडल्या वस्तूचो अनुक्रमणिका
सगळ्यो हिंडोलाच्यो घडणुको हिंडोलाचेरूच (म्हळ्यार <div class="carousel">
) उडयतात.
इव्हेंट प्रकार | वर्णन |
---|---|
स्लाइड.बीएस.हिंडोळ | slide दृष्टांत पद्दत आवाहन करतना ही घडणूक रोखडीच फायर जाता . |
स्लाइड.बीएस.हिंडोळ | हिंडोला आपलें स्लाइड संक्रमण पुराय जातकच ही इव्हेंट फायर करतात. |
संक्रमण काळ बदलचो
संकलन करचे पयलीं Sass चडांत चड बदलूं येता वा तुमी संकलित केल्लो CSS वापरतात जाल्यार सानुकूल शैलींचो संक्रमण काळ .carousel-item
बदलूं येता . $carousel-transition
जायते संक्रमण लागू केल्यार, रुपांतर संक्रमण पयली व्याख्या केल्या हाची खात्री करात (देखीक. transition: transform 2s ease, opacity .5s ease-out
).