कॅरोसेल

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

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

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

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

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

शेवटी, जर तुम्ही आमची 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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

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

मागील आणि पुढील नियंत्रणांमध्ये जोडणे:

मागील पुढे

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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.

प्रथम स्लाइड लेबल

नुल्ला व्हिटे एलिट लिबेरो, फेरेट्रा ऑग्यू मोलिस इंटरडम.

दुसरी स्लाइड लेबल

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

तिसरी स्लाइड लेबल

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

मागील पुढे

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

क्रॉसफेड

.carousel-fadeस्‍लाइडऐवजी फिकट संक्रमणासह स्‍लाइड अॅनिमेट करण्‍यासाठी तुमच्‍या कॅरोसेलमध्‍ये जोडा .

मागील पुढे

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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-slideकीवर्ड स्वीकारते prevकिंवा next, जे स्‍लाइड पोझिशनला त्‍याच्‍या सध्‍याच्‍या स्‍थितीशी संबंधित बदलते. वैकल्पिकरित्या, data-slide-toकॅरोसेलमध्ये रॉ स्लाइड इंडेक्स पास करण्यासाठी वापरा data-slide-to="2", जे स्लाईडची स्थिती एका विशिष्ट निर्देशांकात हलवते ज्यापासून सुरुवात होते 0.

data-ride="carousel"पृष्‍ठ लोडपासून सुरू होणार्‍या अॅनिमेटिंग म्‍हणून कॅरोसेल चिन्हांकित करण्‍यासाठी विशेषता वापरली जाते . हे समान कॅरोसेलच्या (अनावश्यक आणि अनावश्यक) स्पष्ट JavaScript इनिशिएलायझेशनसह संयोजनात वापरले जाऊ शकत नाही.

JavaScript द्वारे

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

$('.carousel').carousel()

पर्याय

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

पद्धती

.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">) गोळीबार केल्या जातात.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

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

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