Source

कॅरोसेल

घटकांद्वारे सायकल चालवण्यासाठी स्लाइडशो घटक—चित्र किंवा मजकूराच्या स्लाइड्स—कॅरोसेलसारखे.

हे कसे कार्य करते

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

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

या घटकाचा अॅनिमेशन प्रभाव prefers-reduced-motionमीडिया क्वेरीवर अवलंबून असतो. आमच्या प्रवेशयोग्यता दस्तऐवजीकरणाचा कमी गती विभाग पहा .

कृपया लक्षात ठेवा की नेस्टेड कॅरोसेल समर्थित नाहीत आणि कॅरोसेल सामान्यत: प्रवेशयोग्यता मानकांचे पालन करत नाहीत.

शेवटी, जर तुम्ही आमची JavaScript स्त्रोतावरून तयार करत असाल, तर त्यासाठी आवश्यक आहेutil.js .

उदाहरण

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

एका .activeस्लाइडवर वर्ग जोडणे आवश्यक आहे अन्यथा कॅरोसेल दिसणार नाही. पर्यायी नियंत्रणांसाठी वर एक अद्वितीय आयडी सेट केल्याचे सुनिश्चित करा .carousel, विशेषत: जर तुम्ही एकाच पृष्ठावर एकाधिक कॅरोसेल वापरत असाल. नियंत्रण आणि निर्देशक घटकांमध्ये घटकाच्या आयडीशी जुळणारी 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"तुम्ही तुमचे कॅरोसेल सुरू करण्यासाठी वापरत नसल्यास , तुम्हाला ते स्वतः सुरू करावे लागेल. हे समान कॅरोसेलच्या (अनावश्यक आणि अनावश्यक) स्पष्ट JavaScript इनिशिएलायझेशनसह संयोजनात वापरले जाऊ शकत नाही.

JavaScript द्वारे

यासह कॅरोसेलला मॅन्युअली कॉल करा:

$('.carousel').carousel()

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-interval="".

नाव प्रकार डीफॉल्ट वर्णन
मध्यांतर संख्या 5000 एखादी वस्तू आपोआप सायकल चालवण्‍यामध्‍ये विलंब लागणारा वेळ. असत्य असल्यास, कॅरोसेल आपोआप सायकल चालणार नाही.
कीबोर्ड बुलियन खरे कॅरोसेलने कीबोर्ड इव्हेंटवर प्रतिक्रिया द्यावी की नाही.
विराम द्या स्ट्रिंग | बुलियन "होव्हर"

वर सेट केल्यास "hover", कॅरोसेलच्या सायकलिंगला विराम देतो mouseenterआणि कॅरोसेलचे सायकलिंग चालू सुरू करतो mouseleave. वर सेट केल्यास false, कॅरोसेलवर फिरल्याने ते थांबणार नाही.

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

पद्धती

असिंक्रोनस पद्धती आणि संक्रमणे

सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .

अधिक माहितीसाठी आमचे JavaScript दस्तऐवजीकरण पहा .

.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.bs.carousel ही घटना ताबडतोब सुरू होते जेव्हा slideउदाहरण पद्धत लागू केली जाते.
slid.bs.carousel कॅरोसेलने स्‍लाइड संक्रमण पूर्ण केल्‍यावर हा इव्‍हेंट फायर केला जातो. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

संक्रमण कालावधी बदला

जर तुम्ही संकलित CSS वापरत असाल तर संकलित करण्यापूर्वी किंवा सानुकूल शैलीसह संक्रमण कालावधी Sass व्हेरिएबलसह .carousel-itemबदलला जाऊ शकतो . $carousel-transitionजर एकाधिक संक्रमणे लागू केली गेली असतील तर, ट्रान्सफॉर्म संक्रमण प्रथम परिभाषित केले असल्याचे सुनिश्चित करा (उदा. transition: transform 2s ease, opacity .5s ease-out).