क्यारोसेल

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

यस पृष्ठमा

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

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

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

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

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

उदाहरण

क्यारोसेलहरूले स्लाइड आयामहरूलाई स्वचालित रूपमा सामान्य गर्दैनन्। जस्तै, तपाईंले सामग्रीलाई उचित आकार दिन थप उपयोगिताहरू वा अनुकूलन शैलीहरू प्रयोग गर्नुपर्ने हुन सक्छ। क्यारोसेलहरूले अघिल्लो/अर्को नियन्त्रण र सूचकहरूलाई समर्थन गर्दा, तिनीहरू स्पष्ट रूपमा आवश्यक पर्दैन। थप्नुहोस् र आफूलाई उपयुक्त देखिए अनुसार अनुकूलन गर्नुहोस्।

.activeकक्षालाई एउटा स्लाइडमा थप्न आवश्यक छ अन्यथा क्यारोसेल देखिने छैन। idवैकल्पिक नियन्त्रणहरूको लागि एक अद्वितीय सेट गर्न निश्चित हुनुहोस् .carousel, विशेष गरी यदि तपाइँ एकल पृष्ठमा धेरै क्यारोसेलहरू प्रयोग गर्दै हुनुहुन्छ। data-bs-targetनियन्त्रण र सूचक तत्वहरूसँग एट्रिब्यूट (वा hrefलिङ्कहरूका लागि) हुनुपर्छ idजुन .carouselतत्वसँग मेल खान्छ।

स्लाइडहरू मात्र

यहाँ स्लाइडहरू मात्र भएको क्यारोसेल छ। ब्राउजर पूर्वनिर्धारित छवि पङ्क्तिबद्धता रोक्न क्यारोसेल छविहरूको .d-blockउपस्थितिलाई नोट गर्नुहोस्।.w-100

html

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

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

अघिल्लो र अर्को नियन्त्रणहरूमा थप्दै। हामी तत्वहरू प्रयोग गर्न सिफारिस गर्छौं <button>, तर तपाईं <a>तत्वहरू पनि प्रयोग गर्न सक्नुहुन्छ role="button"।

html

<div id="carouselExampleControls" class="carousel slide" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

संकेतकहरूको साथ

तपाईं क्यारोसेलमा संकेतकहरू पनि थप्न सक्नुहुन्छ, नियन्त्रणहरूसँगै।

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

क्याप्सन सहित

.carousel-captionकुनै पनि भित्र तत्वको साथ सजिलै आफ्नो स्लाइडमा क्याप्सन थप्नुहोस् .carousel-item। तिनीहरू सजिलैसँग साना भ्यूपोर्टहरूमा लुकाउन सकिन्छ, तल देखाइए अनुसार, वैकल्पिक प्रदर्शन उपयोगिताहरूसँग । हामी तिनीहरूलाई सुरुमा लुकाउँछौं .d-noneर तिनीहरूलाई मध्यम आकारका यन्त्रहरूमा फिर्ता ल्याउँछौं .d-md-block।

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

पहिलो स्लाइडको लागि केही प्रतिनिधि प्लेसहोल्डर सामग्री।

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

दोस्रो स्लाइडको लागि केही प्रतिनिधि प्लेसहोल्डर सामग्री।

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

तेस्रो स्लाइडको लागि केही प्रतिनिधि प्लेसहोल्डर सामग्री।

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

क्रसफेड

.carousel-fadeस्लाइडको सट्टा फेड ट्रान्जिसनको साथ स्लाइडहरू एनिमेट गर्न आफ्नो क्यारोसेलमा थप्नुहोस् । तपाईंको क्यारोसेल सामग्री (जस्तै, पाठ मात्र स्लाइडहरू) मा निर्भर गर्दै, तपाईंले उचित क्रसफेडिङको लागि s .bg-bodyमा केही अनुकूलन CSS थप्न सक्नुहुन्छ।.carousel-item

html

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

व्यक्तिगत `.carousel-item`अन्तराल

अर्को वस्तुमा स्वचालित रूपमा साइकल चलाउने बीचको ढिलाइको समय परिवर्तन data-bs-interval=""गर्न a मा थप्नुहोस् ।.carousel-item

html

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

टच स्वाइपिङ असक्षम पार्नुहोस्

क्यारोसेलहरूले टचस्क्रिन उपकरणहरूमा बायाँ/दायाँ स्वाइप गर्न स्लाइडहरू बीचमा सार्न समर्थन गर्दछ। यो data-bs-touchविशेषता प्रयोग गरेर असक्षम गर्न सकिन्छ। तलको उदाहरणले पनि data-bs-rideविशेषता समावेश गर्दैन त्यसैले यसले स्वत: प्ले गर्दैन।

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

गाढा संस्करण

गाढा नियन्त्रणहरू, संकेतकहरू, र क्याप्शनहरूको लागि .carousel-darkथप्नुहोस् । CSS गुणसँग .carouselतिनीहरूको पूर्वनिर्धारित सेतो फिलबाट नियन्त्रणहरू उल्टाइएको छ । filterक्याप्सन र नियन्त्रणहरूमा अतिरिक्त Sass चरहरू छन् जसले अनुकूलन गर्दछ colorर background-color।

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

पहिलो स्लाइडको लागि केही प्रतिनिधि प्लेसहोल्डर सामग्री।

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

दोस्रो स्लाइडको लागि केही प्रतिनिधि प्लेसहोल्डर सामग्री।

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

तेस्रो स्लाइडको लागि केही प्रतिनिधि प्लेसहोल्डर सामग्री।

html

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

अनुकूलन संक्रमण

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

सास

चरहरू

सबै carousels को लागि चर:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

गाढा क्यारोसेलका लागि चरहरू :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

प्रयोग

डाटा विशेषताहरू मार्फत

क्यारोसेलको स्थिति सजिलै नियन्त्रण गर्न डेटा विशेषताहरू प्रयोग गर्नुहोस्। data-bs-slideकुञ्जी शब्दहरू स्वीकार गर्दछ prevवा next, जसले स्लाइड स्थितिलाई यसको हालको स्थितिसँग सापेक्ष परिवर्तन गर्दछ। वैकल्पिक रूपमा, data-bs-slide-toक्यारोसेलमा कच्चा स्लाइड अनुक्रमणिका पास गर्न प्रयोग गर्नुहोस् data-bs-slide-to="2", जसले स्लाइड स्थितिलाई बाट सुरु हुने विशेष अनुक्रमणिकामा बदल्छ 0।

क्यारोसेललाई data-bs-ride="carousel"पृष्ठ लोडबाट सुरु हुने एनिमेसनको रूपमा चिन्ह लगाउन विशेषता प्रयोग गरिन्छ। यदि तपाईंले data-bs-ride="carousel"आफ्नो क्यारोसेल सुरु गर्न प्रयोग गर्नुहुन्न भने, तपाईंले यसलाई आफैं सुरु गर्नुपर्छ। यसलाई एउटै क्यारोसेलको स्पष्ट JavaScript प्रारम्भिकता (अनावश्यक र अनावश्यक) सँग संयोजनमा प्रयोग गर्न सकिँदैन।

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

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

const carousel = new bootstrap.Carousel('#myCarousel')

विकल्पहरू

डेटा विशेषताहरू वा JavaScript मार्फत विकल्पहरू पास गर्न सकिने हुनाले, तपाईंले विकल्प नाम जोड्न सक्नुहुन्छ data-bs-, जस्तै मा data-bs-animation="{value}"। डेटा विशेषताहरू मार्फत विकल्पहरू पास गर्दा विकल्प नामको केस प्रकारलाई " camelCase " बाट " kebab-case " मा परिवर्तन गर्न निश्चित गर्नुहोस्। उदाहरण को लागी, data-bs-custom-class="beautifier"को सट्टा प्रयोग गर्नुहोस् data-bs-customClass="beautifier"।

बुटस्ट्र्याप ५.२.० को रूपमा, सबै कम्पोनेन्टहरूले प्रयोगात्मक आरक्षित डेटा विशेषतालाई समर्थन गर्दछ data-bs-configजसले JSON स्ट्रिङको रूपमा साधारण कम्पोनेन्ट कन्फिगरेसन राख्न सक्छ। जब एक तत्व हुन्छ data-bs-config='{"delay":0, "title":123}'र data-bs-title="456"विशेषताहरु, अन्तिम titleमान हुनेछ 456र अलग डाटा विशेषताहरु मा दिइएको मान ओभरराइड हुनेछ data-bs-config। थप रूपमा, अवस्थित डेटा विशेषताहरू JSON मानहरू जस्तै घर गर्न सक्षम छन् data-bs-delay='{"show":0,"hide":150}'।

नाम	टाइप गर्नुहोस्	पूर्वनिर्धारित	विवरण
`interval`	संख्या	`5000`	वस्तुलाई स्वचालित रूपमा साइकल चलाउने बीचको ढिलाइको मात्रा।
`keyboard`	बुलियन	`true`	क्यारोसेलले किबोर्ड घटनाहरूमा प्रतिक्रिया दिनुपर्छ कि छैन।
`pause`	स्ट्रिङ, बुलियन	`"hover"`	यदि मा सेट गरिएको छ भने `"hover"`, क्यारोसेलको साइकल चलाउन पज `mouseenter`गर्छ र क्यारोसेलको साइकल चलाउन पुन: सुरु गर्छ `mouseleave`। यदि सेट गरिएको छ भने `false`, क्यारोसेलमा होभर गर्दा यसलाई रोकिने छैन। टच-सक्षम यन्त्रहरूमा, सेट गर्दा `"hover"`, साइकल चलाउन पज हुनेछ `touchend`(प्रयोगकर्ताले क्यारोसेलसँग अन्तरक्रिया पूरा गरेपछि) दुई अन्तरालहरूका लागि, स्वचालित रूपमा पुन: सुरु गर्नु अघि। यो माउस को व्यवहार को अतिरिक्त छ।
`ride`	स्ट्रिङ, बुलियन	`false`	यदि सेट गरिएको छ भने `true`, प्रयोगकर्ताले पहिलो वस्तुलाई म्यानुअल रूपमा साइकल गरेपछि क्यारोसेललाई स्वत: प्ले गर्छ। यदि सेट गरिएको छ भने `"carousel"`, लोडमा क्यारोसेल स्वतः प्ले हुन्छ।
`touch`	बुलियन	`true`	क्यारोसेलले टचस्क्रिन यन्त्रहरूमा बायाँ/दायाँ स्वाइप अन्तरक्रियाहरूलाई समर्थन गर्नुपर्छ।
`wrap`	बुलियन	`true`	क्यारोसेलले लगातार साइकल चलाउनु पर्छ वा कडा स्टपहरू हुनुपर्छ।

विधिहरू

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

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

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

तपाईं क्यारोसेल कन्स्ट्रक्टरसँग क्यारोसेल उदाहरण सिर्जना गर्न सक्नुहुन्छ, उदाहरणका लागि, थप विकल्पहरू सुरु गर्न र वस्तुहरू मार्फत साइकल चलाउन सुरु गर्न:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

विधि	विवरण
`cycle`	बायाँ देखि दायाँ क्यारोसेल वस्तुहरू मार्फत चक्र।
`dispose`	तत्वको क्यारोसेललाई नष्ट गर्छ। (DOM तत्वमा भण्डारण गरिएको डाटा हटाउँछ)
`getInstance`	स्थिर विधि जसले तपाइँलाई DOM तत्वसँग सम्बन्धित क्यारोसेल उदाहरण प्राप्त गर्न अनुमति दिन्छ, तपाइँ यसलाई यसरी प्रयोग गर्न सक्नुहुन्छ `bootstrap.Carousel.getInstance(element)`:।
`getOrCreateInstance`	स्थिर विधि जसले DOM तत्वसँग सम्बन्धित क्यारोसेल उदाहरण फिर्ता गर्छ वा यसलाई प्रारम्भ नगरिएको अवस्थामा नयाँ सिर्जना गर्दछ। तपाईं यसलाई निम्न रूपमा प्रयोग गर्न सक्नुहुन्छ `bootstrap.Carousel.getOrCreateInstance(element)`:।
`next`	अर्को वस्तुमा साइकल। अर्को वस्तु देखाइनु अघि कलरमा फर्कन्छ (जस्तै, `slid.bs.carousel`घटना हुनु अघि)।
`nextWhenVisible`	पृष्ठ नदेखिने वा क्यारोसेल वा यसका अभिभावकहरू नदेखिएका बेला क्यारोसेललाई अर्कोतिर नजानुहोस्। लक्षित वस्तु देखाउनु अघि कलरमा फर्कन्छ ।
`pause`	क्यारोसेललाई वस्तुहरू मार्फत साइकल चलाउनबाट रोक्छ।
`prev`	अघिल्लो वस्तुमा चक्र। अघिल्लो वस्तु देखाइनु अघि कलरमा फर्कन्छ (जस्तै, `slid.bs.carousel`घटना हुनु अघि)।
`to`	क्यारोसेललाई विशेष फ्रेममा (० आधारित, एर्रे जस्तै) मा साइकल गर्नुहोस्। लक्षित वस्तु देखाइनु अघि कलरमा फर्किन्छ (जस्तै, `slid.bs.carousel`घटना हुनु अघि)।

घटनाहरू

बुटस्ट्र्यापको क्यारोसेल क्लासले क्यारोसेल कार्यक्षमतामा हुक गर्नका लागि दुई घटनाहरू उजागर गर्दछ। दुबै घटनाहरूमा निम्न अतिरिक्त गुणहरू छन्:

direction: क्यारोसेल सर्ने दिशा (कि त "left"वा "right")।
relatedTarget: सक्रिय वस्तुको रूपमा स्थानमा स्लाइड भइरहेको DOM तत्व।
from: हालको वस्तुको अनुक्रमणिका
to: अर्को वस्तुको अनुक्रमणिका

सबै क्यारोसेल घटनाहरू क्यारोसेलमा (जस्तै मा <div class="carousel">) मा फायर गरिन्छ।

घटना प्रकार	विवरण
`slid.bs.carousel`	क्यारोसेलले आफ्नो स्लाइड ट्रान्जिसन पूरा गरेपछि फायर गरियो।
`slide.bs.carousel`	`slide`उदाहरण विधि प्रयोग गर्दा तुरुन्तै फायर हुन्छ ।

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

क्यारोसेल

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

उदाहरण

स्लाइडहरू मात्र

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

संकेतकहरूको साथ

क्याप्सन सहित

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

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

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

क्रसफेड

व्यक्तिगत .carousel-itemअन्तराल

टच स्वाइपिङ असक्षम पार्नुहोस्

गाढा संस्करण

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

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

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

अनुकूलन संक्रमण

सास

चरहरू

प्रयोग

डाटा विशेषताहरू मार्फत

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

विकल्पहरू

विधिहरू

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

घटनाहरू

व्यक्तिगत `.carousel-item`अन्तराल