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