Source

हिंडोळ

घटकां मदल्यान सायकल करपा खातीर स्लाइडशो घटक-मजकूराचीं प्रतिमा वा स्लाइड-हिंडोला सारको.

कशें काम करता

हिंडोळ हो सामुग्री माळेंतल्यान सायकल करपा खातीर स्लाइडशो आसा, जो CSS 3D रुपांतरां आनी थोड्या जावास्क्रिप्टान तयार केला. तो प्रतिमा, मजकूर वा सानुकूल मार्कअप हांची माळ घेवन काम करता. तशेंच आदल्या/फुडल्या नियंत्रणां खातीर आनी निर्देशकां खातीर आदार आसपावीत केला.

ज्या ब्राउझरांत पृष्ठ दृश्यताय API समर्थीत आसा, जेन्ना वॅबपान वापरप्याक दिसना (देखीक जेन्ना ब्राउझर टॅब निश्क्रीय आसता, ब्राउझर विंडो उणी जाता, आदी) तेन्ना हिंडोला सरकप टाळटलें.

ह्या घटकाचो एनिमेशन परिणाम prefers-reduced-motionमाध्यम क्वेरीचेर आदारून आसता. आमच्या सुलभताय दस्तावेजीकरणाचो उणो केल्ली गती विभाग पळयात .

उपकार करून लक्षांत दवरात की नेस्टेड हिंडोळां समर्थीत नात, आनी हिंडोला सादारणपणान सुलभताय मानकांक पाळो दिना.

निमाणें, तुमी आमची जावास्क्रिप्ट स्त्रोतांतल्यान तयार करतात जाल्यार, ताका जायutil.js .

उदारण

हिंडोळ आपोआप स्लाइड परिमाण सामान्य करिनात. अशे तरेन, तुमकां सामुग्रीचो योग्य आकार दिवपाक अतिरिक्त उपयुक्तताय वा सानुकूल शैली वापरच्यो पडटल्यो. हिंडोळ फाटल्या/फुडल्या नियंत्रणांक आनी निर्देशकांक तेंको दिता आसतना, तांची स्पश्ट गरज ना. तुमकां योग्य दिसता तशें जोडचें आनी पसंतीचें करचें.

.activeवर्ग एका स्लाइडांत जोडपाची गरज आसा नाजाल्यार हिंडोळो दिसचो ना. तशेंच पर्यायी नियंत्रणां खातीर एक खाशेलो id सेट करपाची खात्री करात .carousel, खास करून तुमी एकाच पानाचेर जायते हिंडोळ वापरतात जाल्यार. नियंत्रण आनी निर्देशक घटकांक घटकाच्या id कडेन जुळपी data-targetगुणधर्म (वा दुव्यां खातीर) आसपाक जाय.href.carousel

फकत स्लाइड्स

हांगा फकत स्लाइड आशिल्ली हिंडोळो आसा. ब्राउझर मुलभूत प्रतिमा संरेखण आडावपाक हिंडोला प्रतिमांचेर .d-blockआनी हांची उपस्थिती लक्षांत दवरात ..w-100

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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>

नियंत्रणां सयत

फाटल्या आनी फुडल्या नियंत्रणांत जोडप:

<div id="carouselExampleControls" class="carousel slide" data-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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

निर्देशकां सयत

तुमी हिंडोळाक निर्देशकय जोडूंक शकतात, नियंत्रणां वांगडा,य.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

कॅप्शनां सयत

.carousel-captionखंयच्याय .carousel-item. _ ते ल्हान दृश्यपोर्टांचेर सहजपणान लिपोवंक शकतात, सकयल दाखयल्ले प्रमाणें, पर्यायी प्रदर्शन उपयुक्तताय . आमी सुरवेक तांकां लिपयतात .d-noneआनी तांकां परतून मध्यम आकाराच्या साधनांचेर हाडटात .d-md-block.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

क्रॉसफेड ​​करप

.carousel-fadeस्लाइड बदला फेड ट्रांझिशनान स्लाइड एनिमेट करपाक तुमच्या हिंडोळ्यांत जोडात .

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

फुडल्या आयटमाक आपसूक सायकल चलोवपा मदीं कळाव करपाचो वेळ बदलपाक data-interval=""a कडेन जोडात ..carousel-item

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

वापर

डेटा गुणधर्मां वरवीं

हिंडोलाची सुवात सहजपणान नियंत्रीत करपाक डेटा गुणधर्म वापरात. data-slideकीवर्ड स्वीकारता prevवा next, जे स्लाइड स्थिती ताच्या सद्याच्या स्थितीच्या सापेक्ष बदलता. पर्यायीपणान, वापरात data-slide-toएक कच्चो स्लाइड अनुक्रमणिका हिंडोळाक पास करपाक data-slide-to="2", जो स्लाइड स्थिती पासून सुरू जावपी एका खाशेल्या निर्देशांकांत स्थलांतरीत करता 0.

data-ride="carousel"पान लोड जावपाचेर सुरू जावपी हिंडोला एनिमेट म्हणून चिन्न करपाखातीर गुणधर्म वापरतात . तुमी तुमच्या हिंडोळाक आरंभ करपाक वापरनात जाल्यार तुमकां data-ride="carousel"स्वता आरंभ करचें पडटलें. एकाच हिंडोळ्याच्या (अनावश्यक आनी गरजे भायर) स्पश्ट जावास्क्रिप्ट आरंभीकरणा वांगडा ताचो वापर करूंक मेळना.

जावास्क्रिप्ट वरवीं

हिंडोळाक हाताळणीन कॉल करात:

$('.carousel').carousel()

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-interval="".

नांव प्रकार डिफॉल्ट वर्णन
अंतरांत आसता आंकडो ५००० इतले आसात आपोआप वस्तू सायकल चलोवपा मदीं कळाव करपाचो वेळ. खोटें आसल्यार हिंडो आपोआप सायकल चलचो ना.
कीबोर्ड वापरतात बूलियन हें नांव खरें कीबोर्ड घडणुकांचेर हिंडोळान प्रतिक्रिया दिवची काय ना.
रावप तार | बूलियन हें नांव "होवर" हें .

जर सेट केल्यार "hover", हिंडोलाचें सायकल चालू दवरता mouseenterआनी हिंडोला चालू सायकल परतून सुरू करता mouseleave. जर सेट केला जाल्यार false, हिंडोला वयल्यान होव्हर करप ताका थांबवचो ना.

स्पर्श-सक्षम डिव्हायसांचेर, जेन्ना सेट केला "hover", सायकल चालू touchend(एकदां वापरप्यान हिंडोला कडेन संवाद सादप सोंपयतकच) दोन अंतरां खातीर, आपोआप परतून सुरू करचे पयलीं. लक्षांत दवरात की हें वयल्या मुयाच्या वर्तनाच्या अतिरिक्त आसा.
रपेट माळ फट वापरपी पयली वस्तू हाताळणी करून सायकल केल्या उपरांत हिंडोला स्वयंचलीत करता. "हिंडोला" आसल्यार, लोडाचेर हिंडोळो ऑटोप्ले करता.
गुठलावप बूलियन हें नांव खरें हिंडोला सतत सायकल चलोवपाक जाय काय कठीण थांबपाक जाय.
स्पर्श बूलियन हें नांव खरें टचस्क्रीन डिव्हायसांचेर हिंडोला डाव्या/उजव्या स्वाइप परस्पर क्रियांक तेंको दिवपाक जाय काय ना.

पद्दती

अतुल्यकालिक पद्दती आनी संक्रमण

सगळ्यो एपीआय पद्दती अतुल्यकालिक आसतात आनी संक्रमण सुरू करतात . संक्रमण सुरू जातकच पूण सोंपचे पयलीं ते फोन करप्या कडेन परततात . ते भायर, संक्रमण घटकाचेर एक पद्दत कॉल दुर्लक्षीत जातलें .

चड म्हायती खातीर आमचें जावास्क्रिप्ट दस्तावेज पळयात .

.carousel(options)

एक पर्यायी पर्यायां सयत हिंडोला आरंभ करता objectआनी आयटमांतल्यान सायकल चलोवंक सुरवात करता.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

हिंडोळाच्या वस्तूंतल्यान डाव्यान उजव्यान सायकल करता.

.carousel('pause')

वस्तूंतल्यान सायकल चलोवपी हिंडोळाक आडायता.

.carousel(number)

हिंडोलाक एका विशिश्ट फ्रेमाक (0 आदारीत, ऍरे सारकें) चक्र करता. लक्ष्य आयटम दाखोवचे पयलीं (म्हळ्यार घडणूक घडचे पयलीं) कॉलराक परतता .slid.bs.carousel

.carousel('prev')

फाटल्या वस्तू कडेन चक्रां करता. आदली वस्त दाखोवचे पयलीं (म्हळ्यार slid.bs.carouselघडणूक घडचे पयलीं) कॉलराक परतता.

.carousel('next')

फुडल्या आयटमा कडेन चक्रां करता. फुडली वस्त दाखोवचे पयलीं (म्हळ्यार slid.bs.carouselघडणूक घडचे पयलीं) कॉलराक परतता.

.carousel('dispose')

एकाद्र्या घटकाचें हिंडोळ नश्ट करता.

घडणुको

बूटस्ट्रॅपाचो हिंडोला वर्ग हिंडोला कार्यक्षमतायांत हुक करपा खातीर दोन घडणुको उक्ती करता. दोनूय घडणुकांक फुडले अतिरिक्त गुणधर्म आसात:

  • direction: हिंडोला खंयचे दिकेन सरकता (एक तर "left"वा "right").
  • relatedTarget: सक्रिय आयटम म्हणून जाग्यार सरकयल्लो DOM घटक.
  • from: सद्याच्या वस्तूचो अनुक्रमणिका
  • to: फुडल्या वस्तूचो अनुक्रमणिका

सगळ्यो हिंडोलाच्यो घडणुको हिंडोलाचेरूच (म्हळ्यार <div class="carousel">) उडयतात.

इव्हेंट प्रकार वर्णन
स्लाइड.बीएस.हिंडोला slideदृष्टांत पद्दत आवाहन करतना ही घडणूक रोखडीच फायर जाता .
स्लाइड.बीएस.हिंडोळ हिंडोला आपलें स्लाइड संक्रमण पुराय जातकच ही इव्हेंट फायर करतात. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

संक्रमण काळ बदलचो

संकलन करचे पयलीं Sass चडांत चड बदलूं येता वा तुमी संकलित केल्लो CSS वापरतात जाल्यार सानुकूल शैलींचो संक्रमण काळ .carousel-itemबदलूं येता . $carousel-transitionजायते संक्रमण लागू केल्यार, रुपांतर संक्रमण पयली व्याख्या केल्या हाची खात्री करात (देखीक. transition: transform 2s ease, opacity .5s ease-out).