हिंडोला
तत्वें दे माध्यम कन्नै साइकिलिंग आस्तै इक स्लाइड शो घटक-पाठ दी छवियां जां स्लाइड्स-जि’यां हिंडोला।
हिंडोला सामग्री दी इक श्रृंखला दे माध्यम कन्नै साइकिलिंग आस्तै इक स्लाइड शो ऐ, जेह् ड़ा CSS 3D रूपांतरणें ते जावास्क्रिप्ट दे थोह् ड़ी-मती कन्नै बनाया गेदा ऐ। एह् छवियां, पाठ, जां कस्टम मार्कअप दी इक श्रृंखला कन्नै कम्म करदा ऐ। इस च पिछले/अगले नियंत्रण ते संकेतकें लेई समर्थन बी शामल ऐ।
ब्राउज़रें च जित्थै पृष्ठ दृश्यता एपीआई समर्थत ऐ, हिंडोला उस बेल्लै स्लाइड होने थमां बचग जिसलै वेबपेज बरतूनी गी नेईं दिक्खेआ जंदा ऐ (जिऱयां ब्राउज़र टैब निष्क्रिय होने पर, ब्राउज़र विंडो गी घट्ट शा घट्ट कीता जंदा ऐ, बगैरा)।
कृपा करियै ध्यान रक्खो जे नेस्टेड हिंडोला समर्थत नेईं ऐ , ते हिंडोला आमतौर पर सुलभता मानकें दे अनुरूप नेईं ऐ ।
आखरी च, जेकर तुस साढ़ी जावास्क्रिप्ट गी स्रोत थमां बना करदे ओ तां इसगीutil.js
.
हिंडोला स्लाइड आयामें गी स्वतः सामान्य नेईं करदे न। इस चाल्ली, तुसेंगी सामग्री गी उचित आकार देने लेई अतिरिक्त उपयोगिताएं जां कस्टम शैलियें दा इस्तेमाल करने दी लोड़ होग. जदके हिंडोला पिछले/अगले नियंत्रण ते संकेतकें दा समर्थन करदे न, तां उंदी स्पश्ट रूप कन्नै लोड़ नेईं ऐ। जिन्ना तुसें गी ठीक लगदा ऐ उन्ना गै जोड़ो ते अनुकूलित करो।
क्लास गी स्लाइड्स च इक च जोड़ने दी .active
लोड़ ऐ नेईं ते हिंडोला नेईं दिक्खेआ जाग। वैकल्पिक नियंत्रणें लेई पर इक अनोखी आईडी बी सुनिश्चत करो .carousel
, खास करियै जेकर तुस इक गै पृष्ठ पर मते सारे हिंडोला दा इस्तेमाल करा करदे ओ. नियंत्रण ते संकेतक तत्वें च इक data-target
गुण (जां href
लिंक आस्तै) होना चाहिदा जेह् ड़ा तत्व दी आईडी कन्नै मेल खंदा ऐ .carousel
.
इत्थें सिर्फ स्लाइड्स कन्नै इक हिंडोला ऐ। ब्राउज़र डिफाल्ट छवि संरेखण गी रोकने आस्तै हिंडोला छवियें पर .d-block
ते दी मौजूदगी पर ध्यान देओ ..w-100
पिछले ते अगले नियंत्रणें च जोड़ना:
तुस हिंडोला च संकेतकें गी बी जोड़ी सकदे ओ, नियंत्रणें दे कन्नै-कन्नै, बी।
.carousel-caption
किसी बी दे अंदर तत्व कन्नै अपनी स्लाइड्स च कैप्शन आसानी कन्नै जोड़ो .carousel-item
. उ’नेंगी वैकल्पिक प्रदर्शन उपयोगिताएं कन्नै , जि’यां हेठ दिक्खेआ गेआ ऐ , छोटे व्यूपोर्टें पर आसानी कन्नै छिपाया जाई सकदा ऐ . अस उनेंगी शुरू च कन्नै छुपाने आं .d-none
ते उनेंगी मध्यम आकार दे उपकरणें पर वापस आह्नने आं .d-md-block
.
.carousel-fade
स्लाइड दी बजाय फीका संक्रमण कन्नै स्लाइड्स गी एनिमेट करने आस्तै अपने हिंडोला च जोड़ो ।
हिंडोला दी स्थिति गी आसानी कन्नै नियंत्रत करने लेई डेटा विशेषताएं दा उपयोग करो। data-slide
कीवर्ड गी स्वीकार करदा ऐ prev
जां next
, जेह् ड़ा स्लाइड स्थिति गी अपनी मौजूदा स्थिति दे सापेक्ष बदलदा ऐ. वैकल्पिक रूप कन्नै, data-slide-to
हिंडोला गी इक कच्ची स्लाइड सूचकांक पास करने आस्तै इस्तेमाल करो data-slide-to="2"
, जेह् ड़ा स्लाइड स्थिति गी इक खास सूचकांक च शिफ्ट करदा ऐ जेह् ड़ा शुरू होंदा ऐ 0
.
एट्रिब्यूट दा data-ride="carousel"
इस्तेमाल इक हिंडोला गी पृष्ठ लोड पर शुरू होने आह् ले एनिमेट दे रूप च चिऱन्नत करने आस्तै कीता जंदा ऐ। इसदा इस्तेमाल इक गै हिंडोला दे (फालतू ते गैर-जरूरी) स्पश्ट जावास्क्रिप्ट आरंभीकरण कन्नै संयोजन च नेईं कीता जाई सकदा ऐ.
हिंडोला गी मैन्युअल रूप कन्नै इस कन्नै कॉल करो:
विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-
, च जोड़ो , जिऱयां data-interval=""
.
नां | किसम | डिफाल्ट | ब्यौरा |
---|---|---|---|
अंतराल दा | नंबर | 5000 दी | इक आइटम गी स्वतः साइकिल चलाने दे बिच्च देरी करने आस्तै समें दी मात्रा। जेकर झूठा ऐ तां हिंडोला अपने आप चक्कर नेईं करग। |
कीबोर्ड दा | बूलियन | सच्च | क्या हिंडोला गी कीबोर्ड दी घटनाएं पर प्रतिक्रिया देनी चाहिदी। |
बराम | तार | बूलियन | "होवर" ऐ। | जेकर सेट कीता गेदा ऐ तां स्पर्श-सक्षम उपकरणें पर, जदूं , पर सेट कीता जंदा ऐ |
सुआरी | डोर | गलत | बरतूनी आसेआ पैह् ली आइटम गी मैन्युअल रूप कन्नै चक्र करने दे बाद हिंडोला गी ऑटोप्ले करदा ऐ। अगर "हिंडोला", लोड पर हिंडोला ऑटोप्ले करदा ऐ। |
पलेस | बूलियन | सच्च | क्या हिंडोला गी लगातार साइकिल चलाना चाहिदा जां हार्ड स्टॉप होनी चाहिदी। |
एसिंक्रोनस तरीके ते संक्रमण
सारे एपीआई तरीके एसिंक्रोनस न ते इक संक्रमण शुरू करदे न . संक्रमण शुरू होने दे बाद गै ओह् काल करने आह् ले कोल वापस औंदे न पर इसदे खत्म होने थमां पैह् ले . इसदे अलावा, इक संक्रमण घटक पर इक विधि काल गी अनदेखा कीता जाग .
होर मती जानकारी आस्तै साढ़े जावास्क्रिप्ट दस्तावेज़ीकरण दिक्खो.
इक वैकल्पिक विकल्पें कन्नै हिंडोला गी object
शुरू करदा ऐ ते आइटमें दे माध्यम कन्नै साइकिल चलाना शुरू करदा ऐ।
हिंडोला आइटमें दे माध्यम कन्नै बाएं थमां दाएं चक्कर लांदा ऐ।
आइटम दे माध्यम कन्नै हिंडोला गी साइकिल चलाने थमां रोकदा ऐ।
हिंडोला गी इक खास फ्रेम (0 आधारत, इक सरणी दे समान) च चक्र करदा ऐ। लक्ष्य आइटम गी दस्सने थमां पैह् ले (यानी घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ ।slid.bs.carousel
पिछले आइटम गी चक्र करदा ऐ। पिछली आइटम गी दस्सने थमां पैह् ले (यानी घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ ।slid.bs.carousel
अगली आइटम तक चक्र। अगली आइटम गी दस्सने थमां पैह् ले (यानी घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ ।slid.bs.carousel
इक तत्व दे हिंडोला गी नष्ट करदा ऐ।
बूटस्ट्रैप दी हिंडोला वर्ग हिंडोला कार्यक्षमता च हुक करने आस्तै दो घटनाएं गी उजागर करदा ऐ। दौनें घटनाएं च निम्नलिखित अतिरिक्त गुण न:
direction
: जिस दिशा च हिंडोला फिसलदा ऐ (यानी"left"
या"right"
) ।relatedTarget
: DOM तत्व जेह् ड़ा सक्रिय आइटम दे रूप च जगह च स्लाइड कीता जा करदा ऐ।from
: वर्तमान आइटम दा अनुक्रमणिकाto
: अगली आइटम दा सूचकांक
सारे हिंडोला घटनाएं गी हिंडोला पर गै (यानी पर <div class="carousel">
) फायर कीता जंदा ऐ ।
घटना दा प्रकार | ब्यौरा |
---|---|
स्लाइड.बीएस.हिंडोला | slide इंस्टेंस विधि गी आह् नने पर एह् घटना तुरत फायर होई जंदी ऐ. |
स्लाइड.बीएस.हिंडोला | इस घटना गी उसलै फायर कीता जंदा ऐ जिसलै हिंडोला अपना स्लाइड संक्रमण पूरा करी लैंदा ऐ। |
दी संक्रमण अवधि गी संकलन करने शा पैह् ले Sass चर .carousel-item
कन्नै बदली सकदा ऐ $carousel-transition
जां कस्टम शैलियां जेकर तुस संकलित CSS दा इस्तेमाल करा करदे ओ. जेकर मते सारे संक्रमण लागू कीते जंदे न तां सुनिश्चत करो जे रूपांतरण संक्रमण गी पैह् ले परिभाशत कीता गेआ ऐ (जियां transition: transform 2s ease, opacity .5s ease-out
) ।