کاروسل

د عناصرو له لارې د سایکل چلولو لپاره د سلایډ شو اجزا — عکسونه یا د متن سلایډ — لکه کیروسل.

په دې پاڼه کې

څنګه کار کوي

کیروسل د یو لړ مینځپانګو له لارې د سایکل چلولو لپاره یو سلایډ شو دی چې د CSS 3D بدلونونو او یو څه جاواسکریپټ سره جوړ شوی. دا د عکسونو، متن، یا دودیز مارک اپ لړۍ سره کار کوي. پدې کې د تیرو / راتلونکو کنټرولونو او شاخصونو ملاتړ هم شامل دی.

په براوزرونو کې چیرې چې د پاڼې لید API ملاتړ کیږي، کاروسیل به د سلیډ کولو څخه مخنیوی وکړي کله چې ویب پاڼه کارونکي ته نه لیدل کیږي (لکه کله چې د براوزر ټب غیر فعال وي، د براوزر کړکۍ کوچنۍ وي، او داسې نور).

د دې برخې د حرکت اغیز د prefers-reduced-motionرسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ .

مهرباني وکړئ په یاد ولرئ چې نیست شوي carousels نه ملاتړ کیږي، او carousels عموما د لاسرسي معیارونو سره مطابقت نلري.

بېلګه

Carousels په اوتومات ډول د سلایډ ابعاد نورمال نه کوي. د دې په څیر، تاسو اړتیا لرئ چې د محتوياتو مناسب اندازې لپاره اضافي اسانتیاوې یا دودیز سټایلونه وکاروئ. پداسې حال کې چې carousels د پخوانیو/راتلونکو کنټرولونو او شاخصونو ملاتړ کوي، دوی په ښکاره ډول اړین ندي. اضافه او تنظیم کړئ لکه څنګه چې تاسو مناسب ګورئ.

ټولګي باید په .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>

د شاخصونو سره

تاسو کولی شئ شاخصونه هم د کنټرول تر څنګ په carousel کې اضافه کړئ.

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>

Crossfade

.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`وقفه

A ته اضافه کړئ data-bs-interval=""ترڅو .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د Sass متغیر سره بدل کیدی شي $carousel-transition-durationکه تاسو تالیف شوی CSS کاروئ. که څو لیږدونه پلي شي، ډاډ ترلاسه کړئ چې د لیږد لیږد لومړی تعریف شوی (د مثال په توګه 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"، نو تاسو باید دا پخپله پیل کړئ. دا د ورته کاروسیل د (بې ځایه او غیر ضروري) واضح جاواسکریپټ ابتکار سره په ترکیب کې نشي کارول کیدی.

د جاواسکریپټ له لارې

carousel په لاسي ډول سره زنګ ووهئ:

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

اختیارونه

لکه څنګه چې اختیارونه د ډیټا ځانګړتیاو یا جاوا سکریپټ له لارې لیږدول کیدی شي، تاسو کولی شئ د اختیار نوم په کې ضمیمه کړئ data-bs-، لکه څنګه چې په کې data-bs-animation="{value}". ډاډ ترلاسه کړئ چې د اختیار نوم د قضیې ډول د " camelCase " څخه " کباب-کیس " ته بدل کړئ کله چې د ډیټا ځانګړتیاو له لارې اختیارونه تیریږي. د مثال په توګه، د data-bs-custom-class="beautifier"ځای پرځای وکاروئ data-bs-customClass="beautifier".

د بوټسټریپ 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`	بولین	`true`	آیا کاروسیل باید د کیبورډ پیښو ته عکس العمل ښکاره کړي.
`pause`	تار، بولین	`"hover"`	که ټاکل شوی وي `"hover"`، د کاروسیل سایکل چلول ودروي `mouseenter`او د کاروسیل سایکل چلول بیا پیلوي `mouseleave`. که ټاکل شوی وي `false`، په کاروسل باندې ځړول به دا ودروي. په ټچ فعال شوي وسیلو کې، کله چې ټاکل شوي وي `"hover"`، سایکل چلول به `touchend`د دوو وقفو لپاره ودریږي (یوځل چې کاروونکي د کاروسیل سره اړیکه پای ته ورسوي) مخکې له دې چې په اتوماتيک ډول بیا پیل شي. دا د موږک چلند سربیره دی.
`ride`	تار، بولین	`false`	که ټاکل شوی وي `true`، کاروسل په اتوماتيک ډول پلی کوي وروسته له دې چې کاروونکي په لاسي ډول لومړی توکي سایکل کوي. که ټاکل شوی وي `"carousel"`، کاروسل په بار کې په اتوماتيک ډول پلی کوي.
`touch`	بولین	`true`	آیا کاروسیل باید په ټچ سکرین وسیلو کې کیڼ / ښیې سویپ تعاملاتو ملاتړ وکړي.
`wrap`	بولین	`true`	آیا کاروسیل باید په دوامداره توګه سایکل وکړي یا سخت تمځایونه ولري.

میتودونه

غیر متناسب میتودونه او لیږدونه

ټولې API میتودونه غیر متزلزل دي او لیږد پیل کوي . کله چې لیږد پیل شي دوی بیرته زنګ وهونکي ته بیرته راځي مګر مخکې له دې چې پای ته ورسیږي . برسېره پردې، د لیږدونکي برخې په اړه د میتود غوښتنې به له پامه غورځول شي .

د نورو معلوماتو لپاره زموږ جاواسکریپټ اسناد وګورئ .

تاسو کولی شئ د carousel جوړونکي سره د کاروسیل مثال رامینځته کړئ ، د مثال په توګه ، د اضافي اختیارونو سره پیل کول او د توکو له لارې سایکل چلول پیل کړئ:

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: د راتلونکي توکي شاخص

د carousel ټولې پیښې پخپله په carousel کې ډزې کیږي (یعنې په <div class="carousel">).

د پیښې ډول	تفصیل
`slid.bs.carousel`	ډزې شوې کله چې کیروسل خپل سلایډ لیږد بشپړ کړ.
`slide.bs.carousel`	سمدلاسه اور اچوي کله چې د `slide`مثال میتود غوښتنه کیږي.

const myCarousel = document.getElementById('myCarousel')

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

کاروسل

څنګه کار کوي

بېلګه

یوازې سلایډونه

د کنټرولونو سره

د شاخصونو سره

د سرلیکونو سره

لومړی سلایډ لیبل

دوهم سلایډ لیبل

دریم سلایډ لیبل

Crossfade

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

د ټچ سویپ کول غیر فعال کړئ

تیاره بڼه

لومړی سلایډ لیبل

دوهم سلایډ لیبل

دریم سلایډ لیبل

دودیز لیږد

ساس

متغیرات

کارول

د معلوماتو ځانګړتیاو له لارې

د جاواسکریپټ له لارې

اختیارونه

میتودونه

غیر متناسب میتودونه او لیږدونه

پیښې

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