ڪارونجهر

عناصرن ذريعي سائيڪل هلائڻ لاءِ سلائيڊ شو جو جزو- تصويرن يا متن جي سلائيڊ- جهڙوڪ ڪارسيل.

هن صفحي تي

اهو ڪيئن ڪم ڪري ٿو

ڪارسيل مواد جي هڪ سيريز ذريعي سائيڪل هلائڻ لاءِ هڪ سلائيڊ شو آهي، جيڪو CSS 3D ٽرانسفارمز ۽ ٿورو جاوا اسڪرپٽ سان ٺهيل آهي. اهو تصويرن، ٽيڪسٽ، يا ڪسٽم مارڪ اپ جي هڪ سيريز سان ڪم ڪري ٿو. ان ۾ پوئين/اڳيون ڪنٽرول ۽ اشارن لاءِ سپورٽ پڻ شامل آھي.

برائوزرن ۾ جتي Page Visibility API جي مدد ڪئي وئي آهي، ڪارسيل سلائڊ ٿيڻ کان بچندو جڏهن ويب پيج استعمال ڪندڙ کي نظر نه اچي (جهڙوڪ جڏهن برائوزر ٽيب غير فعال هجي، برائوزر ونڊو کي ننڍو ڪيو وڃي، وغيره).

ھن جزو جي متحرڪ اثر prefers-reduced-motionميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو .

مھرباني ڪري آگاهه رهو ته nested carousels سپورٽ نه آھن، ۽ carousels عام طور تي رسائي جي معيار سان مطابقت نه آھن.

مثال

Carousels خودڪار طريقي سان سلائڊ جي طول و عرض کي معمول نٿا ڪن. جيئن ته، توهان کي ضرورت هجي اضافي افاديت يا ڪسٽم اسلوب استعمال ڪرڻ لاءِ مواد کي مناسب انداز ۾. جڏهن ته carousels اڳوڻن / ايندڙ ڪنٽرولن ۽ اشارن جي حمايت ڪن ٿا، اهي واضح طور تي گهربل نه آهن. شامل ڪريو ۽ ترتيب ڏيو جيئن توھان مناسب ڏسو.

ڪلاس کي ھڪڙي سلائڊ ۾ شامل ڪرڻ جي .activeضرورت آھي ٻي صورت ۾ ڪارسيل نظر نه ايندو. پڻ پڪ ڪريو ته اختياري ڪنٽرولن لاءِ هڪ منفرد سيٽ ڪريو، خاص طور idتي .carouselجيڪڏهن توهان هڪ صفحي تي ڪيترائي ڪارسيل استعمال ڪري رهيا آهيو. ڪنٽرول ۽ اشاري جي عناصرن کي لازمي طور تي ھڪڙي data-bs-targetخاصيت (يا hrefلنڪس لاء) ھجڻ گھرجي idجيڪا .carouselعنصر سان ملائي.

صرف سلائڊ

هتي صرف سلائڊن سان گڏ ڪارسيل آهي. برائوزر جي ڊفالٽ تصوير جي ترتيب کي روڪڻ لاءِ ڪارسيل تصويرن جي موجودگي کي نوٽ ڪريو .d-block..w-100

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

<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>

اشارن سان

توھان پڻ شامل ڪري سگھوٿا اشارن کي ڪارسيل ۾، ڪنٽرولن سان گڏ، پڻ.

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

پهرين سلائڊ ليبل

پهرين سلائڊ لاءِ ڪجهه نمائندو جڳهه هولڊر مواد.

ٻيو سلائڊ ليبل

ٻي سلائڊ لاءِ ڪجھ نمائندو جڳھ رکندڙ مواد.

ٽيون سلائڊ ليبل

ٽئين سلائڊ لاءِ ڪجھ نمائندو جڳھ رکندڙ مواد.

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <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ھڪڙي سلائڊ جي بدران فيڊ ٽرانسشن سان.

<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=""ڪرڻ .carousel-itemلاءِ دير ڪرڻ لاءِ پاڻمرادو سائيڪل هلائڻ جي وچ ۾ ايندڙ شيون.

<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>

ٽچ سوائپنگ کي بند ڪريو

Carousels ٽچ اسڪرين ڊوائيسز تي کاٻي/ساڄي سوائپ ڪرڻ جي حمايت ڪن ٿا ته جيئن سلائڊن جي وچ ۾ منتقل ٿئي. data-bs-touchهي خاصيت استعمال ڪندي غير فعال ٿي سگهي ٿو . هيٺ ڏنل مثال پڻ شامل نه آهي data-bs-rideوصف شامل آهي ۽ انهي data-bs-interval="false"ڪري اهو خودڪار نٿو ٿئي.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="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شامل ڪريو . .carouselڪنٽرول ان جي ڊفالٽ سفيد ڀري کان filterCSS ملڪيت سان تبديل ڪيا ويا آهن. ڪيپشن ۽ ڪنٽرولن ۾ اضافي Sass متغير آهن جيڪي ڪسٽمائيز ڪن ٿا color۽ background-color.

پهرين سلائڊ ليبل

پهرين سلائڊ لاءِ ڪجهه نمائندو جڳهه هولڊر مواد.

ٻيو سلائڊ ليبل

ٻي سلائڊ لاءِ ڪجھ نمائندو جڳھ رکندڙ مواد.

ٽيون سلائڊ ليبل

ٽئين سلائڊ لاءِ ڪجھ نمائندو جڳھ رکندڙ مواد.

<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>

ڪسٽم منتقلي

جي منتقلي جي مدت کي ترتيب ڏيڻ کان اڳ Sass متغير .carousel-itemسان تبديل ڪري سگھجي ٿو $carousel-transition-durationيا ڪسٽم اسلوب جيڪڏھن توھان مرتب ڪيل CSS استعمال ڪري رھيا آھيو. جيڪڏهن هڪ کان وڌيڪ منتقلي لاڳو ڪئي وئي آهي، پڪ ڪريو ته تبديلي جي منتقلي جي وضاحت ڪئي وئي آهي پهرين (مثال طور. transition: transform 2s ease, opacity .5s ease-out).

ساس

متغير

$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);

استعمال

ڊيٽا خاصيتن جي ذريعي

آساني سان carousel جي پوزيشن کي ڪنٽرول ڪرڻ لاء ڊيٽا خاصيتون استعمال ڪريو. data-bs-slideلفظن کي قبول ڪري ٿو prevيا next، جيڪو سلائڊ پوزيشن کي ان جي موجوده پوزيشن جي نسبت سان تبديل ڪري ٿو. متبادل طور تي، استعمال ڪريو data-bs-slide-toخام سلائڊ انڊيڪس ڪارسيل ڏانھن منتقل ڪرڻ لاء data-bs-slide-to="2"، جيڪو سلائڊ پوزيشن کي ھڪڙي خاص انڊيڪس ڏانھن منتقل ڪري ٿو جيڪو شروع ٿئي ٿو 0.

data-bs-ride="carousel"صفحو لوڊ تي شروع ٿيندڙ متحرڪ طور تي ڪارسيل کي نشان لڳائڻ لاءِ استعمال ڪيو ويندو آهي . جيڪڏهن توهان استعمال نٿا ڪريو data-bs-ride="carousel"توهان جي ڪارسيل کي شروع ڪرڻ لاء، توهان کي ان کي پنهنجو پاڻ کي شروع ڪرڻو پوندو. اهو استعمال نه ٿو ڪري سگھجي (بيڪار ۽ غير ضروري) واضح JavaScript جي شروعات سان گڏ ساڳي ڪارسيل جي.

جاوا اسڪرپٽ ذريعي

ڪاريسل کي هٿ سان ڪال ڪريو:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-bs-، جيئن data-bs-interval="".

نالو	قسم	ڊفالٽ	وصف
`interval`	نمبر	`5000`	وقت جو مقدار پاڻمرادو سائيڪل هلائڻ جي وچ ۾ دير ڪرڻ لاءِ. جيڪڏهن `false`, carousel خودڪار طريقي سان سائيڪل نه ڪندو.
`keyboard`	بولين	`true`	ڇا ڪارسيل کي ڪي بورڊ جي واقعن تي رد عمل ڏيڻ گهرجي.
`pause`	تار \| بولين	`'hover'`	جيڪڏهن سيٽ ڪيو ويو `'hover'`آهي ته، ڪارسيل جي سائيڪلنگ کي روڪي ٿو آن `mouseenter`۽ ڪارسيل جي سائيڪل کي ٻيهر شروع ڪري ٿو `mouseleave`. جيڪڏهن سيٽ ڪيو ويو ته `false`، ڪارسيل مٿان هوور ڪرڻ ان کي روڪي نه سگهندو. ٽچ-فعال ڊوائيسز تي، جڏهن سيٽ ڪيو ويو آهي `'hover'`، سائيڪل هلائڻ بند ٿي ويندي `touchend`(هڪ ڀيرو استعمال ڪندڙ ڪارسيل سان رابطو ختم ڪري) ٻن وقفن لاءِ، پاڻمرادو ٻيهر شروع ٿيڻ کان اڳ. نوٽ ڪريو ته اھو مٿي ڏنل ماؤس جي رويي کان علاوه آھي.
`ride`	تار \| بولين	`false`	استعمال ڪندڙ کي دستي طور تي پهرين شئي کي هلائڻ کان پوءِ ڪارسيل کي خودڪار ڪري ٿو. جيڪڏهن سيٽ ڪيو ويو آهي `'carousel'`، لوڊ تي ڪارسيل کي خودڪار ڪري ٿو.
`wrap`	بولين	`true`	ڇا ڪارسيل کي مسلسل سائيڪل هلائڻ گهرجي يا سخت اسٽاپ آهن.
`touch`	بولين	`true`	ڇا ڪارسيل کي ٽچ اسڪرين ڊيوائسز تي کاٻي/ ساڄي سوائپ واري رابطي کي سپورٽ ڪرڻ گهرجي.

طريقا

هم وقت سازي طريقا ۽ منتقلي

سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن واپس ويندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

وڌيڪ معلومات لاءِ اسان جا JavaScript دستاويز ڏسو .

توهان carousel تعمير ڪندڙ سان هڪ carousel مثال ٺاهي سگهو ٿا، مثال طور، اضافي اختيارن سان شروعات ڪرڻ ۽ شيون ذريعي سائيڪل هلائڻ شروع ڪرڻ لاءِ:

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

طريقو	وصف
`cycle`	کاٻي کان ساڄي تائين ڪارسيل شيون ذريعي سائيڪل.
`pause`	ڪارسيل کي شيون ذريعي سائيڪل هلائڻ کان روڪي ٿو.
`prev`	پوئين شيءِ ڏانهن چڪر. ڪالر ڏانهن واپسي اڳئين شيون ڏيکاريو ويو آهي (مثال طور، `slid.bs.carousel`واقعي ٿيڻ کان اڳ).
`next`	ايندڙ شيون ڏانهن سائيڪل. ايندڙ شيون ڏيکاريو ويو کان اڳ سڏيندڙ ڏانهن واپسي (مثال طور، `slid.bs.carousel`واقعي ٿيڻ کان اڳ).
`nextWhenVisible`	جڏهن صفحو نظر نه ٿو اچي يا ڪارسيل يا ان جو والدين نظر نه اچي رهيو آهي، تڏهن ڪارسيل کي اڳتي نه وڌايو. ٽارگيٽ آئٽم ڏيکاريو ويو کان اڳ ڪالر ڏانهن واپسي
`to`	ڪارسيل کي ھڪڙي خاص فريم ڏانھن (0 تي ٻڌل، ھڪڙي صف سان ملندڙ جلندڙ). ٽارگيٽ آئٽم ڏيکاريو ويو کان اڳ ڪال ڪندڙ ڏانهن واپسي (مثال طور، `slid.bs.carousel`واقعي ٿيڻ کان اڳ).
`dispose`	هڪ عنصر جي carousel کي تباهه ڪري ٿو. (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو)
`getInstance`	جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل carousel مثال حاصل ڪرڻ جي اجازت ڏئي ٿو، توهان ان کي هن طرح استعمال ڪري سگهو ٿا:`bootstrap.Carousel.getInstance(element)`
`getOrCreateInstance`	جامد طريقو جيڪو DOM عنصر سان لاڳاپيل ڪارسيل مثال واپس ڪري ٿو يا ان صورت ۾ هڪ نئون ٺاهيو جڏهن اهو شروع نه ڪيو ويو هو. توھان ان کي ھن طرح استعمال ڪري سگھو ٿا:`bootstrap.Carousel.getOrCreateInstance(element)`

واقعا

بوٽ اسٽريپ جي ڪارسيل ڪلاس ٻن واقعن کي ظاهر ڪري ٿو ڪارسيل ڪارڪردگي ۾ ڇڪڻ لاءِ. ٻنهي واقعن ۾ هيٺيان اضافي خاصيتون آهن:

direction: اهو رخ جنهن ۾ ڪارسيل سلائيڊنگ آهي (يا "left"يا "right").
relatedTarget: DOM عنصر جيڪو فعال شيءِ جي طور تي جاءِ تي سلائيڊ ڪيو پيو وڃي.
from: موجوده شيءِ جي انڊيڪس
to: ايندڙ شئي جي انڊيڪس

سڀ ڪارسيل واقعا ڪارسيل تي فائر ڪيا ويا آهن (يعني تي <div class="carousel">).

واقعي جو قسم	وصف
`slide.bs.carousel`	فوري طور تي باهه لڳندي آهي جڏهن `slide`مثال جي طريقي کي سڏيو ويندو آهي.
`slid.bs.carousel`	فائر ڪيو ويو جڏهن ڪارسيل پنهنجي سلائڊ منتقلي کي مڪمل ڪيو آهي.

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

ڪارونجهر

اهو ڪيئن ڪم ڪري ٿو

مثال

صرف سلائڊ

ڪنٽرول سان

اشارن سان

عنوانن سان

پهرين سلائڊ ليبل

ٻيو سلائڊ ليبل

ٽيون سلائڊ ليبل

ڪراس فيڊ

انفرادي .carousel-itemوقفو

ٽچ سوائپنگ کي بند ڪريو

اونداهي قسم

پهرين سلائڊ ليبل

ٻيو سلائڊ ليبل

ٽيون سلائڊ ليبل

ڪسٽم منتقلي

ساس

متغير

استعمال

ڊيٽا خاصيتن جي ذريعي

جاوا اسڪرپٽ ذريعي

اختيارن

طريقا

هم وقت سازي طريقا ۽ منتقلي

واقعا

انفرادي `.carousel-item`وقفو