Source

क्यारोसेल

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

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

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

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

यस कम्पोनेन्टको एनिमेसन प्रभाव prefers-reduced-motionमिडिया क्वेरीमा निर्भर हुन्छ। हाम्रो पहुँच कागजातको घटाइएको गति खण्ड हेर्नुहोस् ।

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

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

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

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

$('.carousel').carousel()

विकल्पहरू

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

नाम टाइप गर्नुहोस् पूर्वनिर्धारित विवरण
अन्तराल संख्या ५००० वस्तुलाई स्वचालित रूपमा साइकल चलाउनको बीचमा ढिलाइ हुने समयको मात्रा। यदि गलत छ भने, क्यारोसेल स्वचालित रूपमा चक्र हुनेछैन।
किबोर्ड बुलियन सत्य क्यारोसेलले किबोर्ड घटनाहरूमा प्रतिक्रिया दिनुपर्छ कि छैन।
पज स्ट्रिङ | बुलियन "होभर"

यदि मा सेट गरिएको छ भने "hover", क्यारोसेलको साइकल चलाउन पज mouseenterगर्छ र क्यारोसेलको साइकल चलाउन पुन: सुरु गर्छ mouseleave। यदि सेट गरिएको छ भने false, क्यारोसेलमा होभर गर्दा यसलाई रोकिने छैन।

टच-सक्षम यन्त्रहरूमा, सेट गर्दा "hover", साइकल चलाउन पज हुनेछ touchend(प्रयोगकर्ताले क्यारोसेलसँग अन्तरक्रिया पूरा गरेपछि) दुई अन्तरालहरूका लागि, स्वचालित रूपमा पुन: सुरु गर्नु अघि। नोट गर्नुहोस् कि यो माथिको माउस व्यवहारको अतिरिक्त हो।
सवारी तार गलत प्रयोगकर्ताले पहिलो वस्तुलाई म्यानुअल रूपमा साइकल गरेपछि क्यारोसेललाई स्वतः प्ले गर्छ। यदि "क्यारोसेल", लोडमा क्यारोसेल स्वतः प्ले गर्छ।
बेर्नु बुलियन सत्य क्यारोसेलले लगातार साइकल चलाउनु पर्छ वा कडा स्टपहरू हुनुपर्छ।
स्पर्श बुलियन सत्य क्यारोसेलले टचस्क्रिन यन्त्रहरूमा बायाँ/दायाँ स्वाइप अन्तरक्रियाहरूलाई समर्थन गर्नुपर्छ।

विधिहरू

एसिन्क्रोनस विधि र संक्रमण

सबै एपीआई विधिहरू एसिन्क्रोनस छन् र एक संक्रमण सुरु गर्नुहोस् । तिनीहरू संक्रमण सुरु हुने बित्तिकै तर यो समाप्त हुनु अघि कलरमा फर्कन्छन् । थप रूपमा, ट्रान्जिसनिङ कम्पोनेन्टमा विधि कललाई बेवास्ता गरिनेछ ।

थप जानकारीको लागि हाम्रो जाभास्क्रिप्ट कागजात हेर्नुहोस् ।

.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">।

घटना प्रकार विवरण
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)।