क्यारोसेल

तत्वहरू मार्फत साइकल चलाउनको लागि स्लाइड शो कम्पोनेन्ट—तस्बिरहरू वा पाठको स्लाइडहरू—जस्तै क्यारोसेल।

यसले कसरी काम गर्छ

क्यारोसेल सामग्रीको श्रृंखला मार्फत साइकल चलाउनको लागि स्लाइड शो हो, CSS 3D रूपान्तरणहरू र थोडा JavaScript संग निर्मित। यसले छविहरू, पाठ, वा अनुकूलन मार्कअपको श्रृंखलासँग काम गर्दछ। यसले अघिल्लो/अर्को नियन्त्रण र संकेतकहरूको लागि समर्थन पनि समावेश गर्दछ।

ब्राउजरहरूमा जहाँ पृष्ठ दृश्यता API समर्थित छ, क्यारोसेलले वेबपेज प्रयोगकर्तालाई नदेखिने बेला स्लाइड गर्नबाट जोगिनेछ (जस्तै जब ब्राउजर ट्याब निष्क्रिय छ, ब्राउजर सञ्झ्याल मिनिमाइज गरिएको छ, आदि)।

कृपया ध्यान दिनुहोस् कि नेस्टेड क्यारोसेलहरू समर्थित छैनन्, र क्यारोसेलहरू सामान्यतया पहुँच मापदण्डहरूसँग मेल खाँदैनन्।

अन्तमा, यदि तपाइँ स्रोतबाट हाम्रो जाभास्क्रिप्ट निर्माण गर्दै हुनुहुन्छ भने, यो आवश्यक छ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।

पहिलो स्लाइड लेबल

Nulla vitae elit libero, a pharetra augue mollis interdum।

दोस्रो स्लाइड लेबल

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 प्रारम्भिकता (अनावश्यक र अनावश्यक) सँग संयोजनमा प्रयोग गर्न सकिँदैन।

जाभास्क्रिप्ट मार्फत

क्यारोसेललाई म्यानुअल रूपमा कल गर्नुहोस्:

$('.carousel').carousel()

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-interval=""।

विधिहरू

.carousel(options)

वैकल्पिक विकल्पहरूको साथ क्यारोसेल प्रारम्भ गर्दछ objectर वस्तुहरू मार्फत साइकल चलाउन थाल्छ।

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

.carousel('cycle')

बायाँ देखि दायाँ क्यारोसेल वस्तुहरू मार्फत साइकल।

.carousel('pause')

क्यारोसेललाई वस्तुहरू मार्फत साइकल चलाउनबाट रोक्छ।

.carousel(number)

क्यारोसेललाई विशेष फ्रेममा (० आधारित, एर्रे जस्तै) मा साइकल गर्नुहोस्। लक्षित वस्तु देखाइनु अघि कलरमा फर्कन्छ (अर्थात 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)।