کارۆسێل

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

لەم پەیجەدا

چۆن کاردەکات

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

لەو وێبگەڕانەی کە 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بۆ کارۆسێلەکەت بۆ ئەنیمەیشنکردنی سلایدەکان بە گواستنەوەی کاڵبوونەوە لەبری سلاید. بەپێی ناوەڕۆکی کارۆسێلەکەت (بۆ نموونە، سلایدەکانی تەنها دەق)، لەوانەیە بتەوێت .bg-bodyیان هەندێک CSSی تایبەت زیاد بکەیت بۆ .carousel-items بۆ crossfading ی دروست.

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

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

ماوەی گواستنەوەی .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"بۆ دەستپێکردنی کارۆسێلەکەت، دەبێت خۆت سەرەتایی بکەیت. ناتوانرێت بە تێکەڵکردن لەگەڵ (زیادە و ناپێویست) دەستپێکردنی ڕوونی جاڤاسکڕێپتی هەمان کارۆسێل بەکاربهێنرێت.

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

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

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

بژاردەکان

بەو پێیەی دەتوانرێت هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا یان جاڤاسکڕێپتەوە تێپەڕێنرێت، دەتوانیت ناوی هەڵبژاردنێک زیاد بکەیت بۆ data-bs-, وەک لە data-bs-animation="{value}". دڵنیابە لە گۆڕینی جۆری کەیسی ناوی هەڵبژاردنەکە لە “ camelCase ” بۆ “ kebab-case ” لە کاتی تێپەڕاندنی هەڵبژاردنەکان لە ڕێگەی تایبەتمەندییەکانی داتا. بۆ نموونە data-bs-custom-class="beautifier"لەبری data-bs-customClass="beautifier".

لە Bootstrap 5.2.0 ەوە، هەموو پێکهاتەکان پشتگیری لە تایبەتمەندییەکی داتا یەدەگی تاقیکاری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`	boolean	`true`	ئایا پێویستە کارۆسێلەکە کاردانەوەی هەبێت بەرامبەر بە ڕووداوەکانی کیبۆرد.
`pause`	ڕیز، بولی	`"hover"`	ئەگەر لەسەر . `"hover"`_ ئەگەر لەسەر . لەسەر ئامێرە چالاککراوەکانی دەست لێدان، کاتێک لەسەر , دانراوە ، پاسکیلسواری وەستاوە (کاتێک بەکارهێنەر کارلێککردنی لەگەڵ کارۆسێلەکە تەواو کرد) بۆ دوو کات، پێش ئەوەی بە شێوەیەکی ئۆتۆماتیکی دەستپێبکاتەوە. ئەمەش جگە لە هەڵسوکەوتی مشکەکە.`mouseentermouseleavefalse"hover"touchend`
`ride`	ڕیز، بولی	`false`	ئەگەر لەسەر ، دانرابێت `true`، کارۆسێلەکە بە شێوەیەکی ئۆتۆماتیکی دەژەنێت دوای ئەوەی بەکارهێنەر بە دەستی یەکەم شت دەخولێنێتەوە. ئەگەر لەسەر , دانراوە `"carousel"`، کارۆسێلەکە بە شێوەیەکی ئۆتۆماتیکی لە کاتی بارکردندا دەژەنێت.
`touch`	boolean	`true`	ئایا کارۆسێلەکە دەبێت پشتگیری لە کارلێکەکانی سوایپی چەپ/ڕاست بکات لەسەر ئامێرەکانی شاشەی تاچ.
`wrap`	boolean	`true`	ئایا کارۆسێلەکە دەبێت بە بەردەوامی پاسکیل بسوڕێتەوە یان وێستگەی سەختی هەبێت.

شێوازەکان

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

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

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

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

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`	کارۆسێلەکە دەخولێنێتەوە بۆ چوارچێوەیەکی دیاریکراو (بە بنەمای 0، هاوشێوەی ڕیزبەندییەک). پێش ئەوەی بابەتی ئامانج پیشان بدرێت دەگەڕێتەوە بۆ پەیوەندیکەر (بۆ نموونە، پێش ئەوەی `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`مەودای تاکەکەسی