باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

کارۆسێل

پێکهاتەیەکی پیشاندانی سلاید بۆ سوڕانەوە بەناو توخمەکاندا- وێنە یان سلایدی دەق- وەک کارۆسێل.

چۆن کاردەکات

کارۆسێلەکە نمایشێکی سلایدە بۆ پاسکیلسواری لە ڕێگەی زنجیرەیەک ناوەڕۆکەوە، بە گۆڕینی سێ ڕەهەندی CSS و کەمێک جاڤاسکڕێپت دروستکراوە. بە زنجیرەیەک وێنە، دەق، یان مارکاپی تایبەت کاردەکات. هەروەها پشتگیری بۆ کۆنتڕۆڵ و نیشاندەرەکانی پێشوو/دواتر لەخۆدەگرێت.

لەو وێبگەڕانەی کە API ی بینینی لاپەڕە پشتگیری دەکرێت، کارۆسێلەکە خۆی لە خلیسکان دەپارێزێت کاتێک وێبپەڕەکە بۆ بەکارهێنەر نابینرێت (وەک کاتێک تابی وێبگەڕەکە ناچالاك بێت، پەنجەرەی وێبگەڕەکە کەمترین بێت و هتد).

کاریگەری ئەنیمەیشنی ئەم پێکهاتەیە وابەستەی prefers-reduced-motionپرسیاری میدیایە. سەیری بەشی جووڵەی کەمکراوە بکە لە بەڵگەنامەکانی دەستڕاگەیشتنمان .

تکایە ئاگاداربە کە کارۆسێلەکانی هێلانە پشتگیری ناکرێت، و کارۆسێلەکان بەگشتی لەگەڵ ستاندار��ەکانی دەستڕاگەیشتن ناگونجێت.

نموونە

کارۆسێلەکان بە شێوەیەکی ئۆتۆماتیکی ڕەهەندەکانی سلایدەکان ئاسایی ناکەنەوە. بەم شێوەیە، لەوانەیە پێویستت بە بەکارهێنانی سوودمەندی زیادە یان ستایلە تایبەتمەندەکان بێت بۆ ئەوەی قەبارەی ناوەڕۆک بە شێوەیەکی گونجاو قەبارەیان هەبێت. لە کاتێکدا کە کارۆسێلەکان پشتگیری لە کۆنتڕۆڵ و نیشاندەرەکانی پێشوو/دواتر دەکەن، بەڵام بە ڕوونی پێویست نین. بەپێی پێویست زیادکردن و خۆکارانەکردن.

پێویستە .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>

زیاد بکە data-bs-interval=""بۆ a .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>

سوایپی تاچ لەکاربخە

کارۆسێلەکان پشتگیری لە پەنجەدان بە چەپ/ڕاست دەکەن لەسەر ئامێرەکانی شاشەی تاچ بۆ جووڵەکردن لە نێوان سلایدەکاندا. دەتوانرێت ئەمە بە بەکارهێنانی 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بۆ کۆنتڕۆڵ و نیشاندەر و کەپشنی تاریکتر. filterکۆنتڕۆڵەکان لە پڕکردنەوەی سپی پێشوەختەیانەوە بە تایبەتمەندی CSS پێچەوانە کراون . کەپشن و کۆنتڕۆڵەکان گۆڕاوەی 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>

گواستنەوەی تایبەتمەندی

ماوەی گواستنەوەی .carousel-itemدەتوانرێت بە $carousel-transition-durationگۆڕاوەی Sass پێش کۆمپایڵکردن بگۆڕدرێت یان شێوازە تایبەتەکان ئەگەر تۆ 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);

بەکارهێنان

لە ڕێگەی تایبەتمەندییەکانی داتا

تایبەتمەندی داتا بەکاربهێنە بۆ ئەوەی بە ئاسانی شوێنی کارۆسێلەکە کۆنتڕۆڵ بکەیت. data-bs-slideوشە سەرەکییەکان prevیان قبوڵ دەکات next، کە شوێنی سلایدەکە دەگۆڕێت بە بەراورد بە شوێنی ئێستای. یانیش، بەکاربهێنە data-bs-slide-toبۆ گواستنەوەی ئیندێکسی خام سلاید بۆ کارۆسێلەکە data-bs-slide-to="2"، کە شوێنی سلایدەکە دەگۆڕێت بۆ ئیندێکسێکی تایبەت کە بە 0.

تایبەتمەندییەکە data-bs-ride="carousel"بەکاردێت بۆ نیشاندانی کارۆسێلێک وەک ئەنیمەیشنێک کە لە کاتی بارکردنی لاپەڕەوە دەست پێدەکات. ئەگەر بەکارنەهێنیت data-bs-ride="carousel"بۆ دەستپێکردنی کارۆسێلەکەت، دەبێت خۆت سەرەتایی بکەیت. ناتوانرێت بە تێکەڵکردن لەگەڵ (زیادە و ناپێویست) دەستپێکردنی ڕوونی جاڤاسکڕێپتی هەمان کارۆسێل بەکاربهێنرێت.

لە ڕێگەی جاڤاسکڕێپتەوە

بە دەستی پەیوەندی بە کارۆسێلەوە بکە بەم شێوەیە:

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

بژاردەکان

دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت. بۆ تایبەتمەندیەکانی داتا، ناوی هەڵبژاردنەکە زیاد بکە بۆ data-bs-, وەک لە data-bs-interval="".

ناو جۆر بنەڕەتی وەسف
interval ژماره‌ 5000 بڕی کات بۆ دواکەوتن لە نێوان پاسکیلکردنی ئۆتۆماتیکی شتێک. ئەگەر false, کارۆسێل بە شێوەیەکی ئۆتۆماتیکی خول ناکات.
keyboard boolean true ئایا پێویستە کارۆسێلەکە کاردانەوەی هەبێت بەرامبەر بە ڕووداوەکانی کیبۆرد.
pause ڕستە | boolean 'hover'

ئەگەر لەسەر . 'hover'_ ئەگەر لەسەر .mouseentermouseleavefalse

لەسەر ئامێرە چالاککراوەکانی دەست لێدان، کاتێک لەسەر , دانراوە 'hover'، پاسکیلسواری وەستاوە touchend(کاتێک بەکارهێنەر کارلێککردنی لەگەڵ کارۆسێلەکە تەواو کرد) بۆ دوو کات، پێش ئەوەی بە شێوەیەکی ئۆتۆماتیکی دەستپێبکاتەوە. سەرنج بدە ئەمە جگە لە هەڵسوکەوتی ماوسەکەی سەرەوەیە.

ride ڕستە | boolean false کارۆسێلەکە بە شێوەیەکی ئۆتۆماتیکی دەژەنێت دوای ئەوەی بەکارهێنەر بە دەستی یەکەم شت دەخولێنێتەوە. ئەگەر لەسەر , دانراوە 'carousel'، کارۆسێلەکە بە شێوەیەکی ئۆتۆماتیکی لە کاتی بارکردندا دەژەنێت.
wrap boolean true ئایا کارۆسێلەکە دەبێت بە بەردەوامی پاسکیل بسوڕێتەوە یان وێستگەی سەختی هەبێت.
touch boolean true ئایا کارۆسێلەکە دەبێت پشتگیری لە کارلێکەکانی سوایپی چەپ/ڕاست بکات لەسەر ئامێرەکانی شاشەی تاچ.

شێوازەکان

شێواز و گواستنەوە ناهاوسەنگەکان

هەموو شێوازەکانی API ناهاوسەنگن و دەست بە گواستنەوە دەکەن . هەر کە گواستنەوەکە دەستی پێکرد بەڵام پێش ئەوەی کۆتایی بێت دەگەڕێنەوە لای پەیوەندیکەرەکە . سەرەڕای ئەوە، بانگەوازێکی شێواز لەسەر پێکهاتەیەکی گواستنەوە پشتگوێ دەخرێت .

بۆ زانیاری زیاتر سەیری بەڵگەنامەکانی جاڤاسکڕێپت بکە .

دەتوانیت نموونەیەکی کارۆسێل بە بنیاتنەری کارۆسێل دروست بکەیت، بۆ نموونە، بۆ دەستپێکردن بە هەڵبژاردەی زیادە و دەستپێکردنی پاسکیلسواری لە ڕێگەی بابەتەکەوە:

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 کارۆسێلی توخمێک لەناو دەبات. (زانیاری هەڵگیراو لەسەر توخمەکەی DOM لا دەبات)
getInstance شێوازی ئیستاتیک کە ڕێگەت پێدەدات نموونەی کارۆسێلەکە بەدەستبهێنیت کە پەیوەندی بە توخمێکی DOMەوە هەیە، دەتوانیت بەم شێوەیە بەکاری بهێنیت: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...
})