Source

کارۆسێل

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

چۆن کاردەکات

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

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

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

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

لە کۆتاییدا ئەگەر جاڤاسکڕێپتەکەمان لە سەرچاوەوە دروست دەکەیت، پێویستی بەutil.js .

نموونە

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

پێویستە .activeپۆلەکە زیاد بکرێت بۆ یەکێک لە سلایدەکان ئەگەرنا کارۆسێلەکە دیار نابێت. هەروەها دڵنیابە کە id ێکی ناوازە لەسەر .carouselبۆ کۆنتڕۆڵە هەڵبژاردەکان دابنێیت، بە تایبەت ئەگەر چەندین کارۆسێل لە یەک لاپەڕەدا بەکاردەهێنیت. توخمەکانی کۆنترۆڵ و نیشاندەر دەبێت data-targetتایبەتمەندییەکیان هەبێت (یان hrefبۆ بەستەرەکان) کە لەگەڵ id ی .carouselتوخمەکەدا بگونجێت.

تەنها سلایدەکان

لێرەدا کارۆسێلێک هەیە کە تەنها سلایدەکانی تێدایە. سەرنج بدە لەسەر بوونی .d-blockو .w-100لەسەر وێنەکانی کارۆسێل بۆ ڕێگریکردن لە ڕێکخستنی وێنەی پێشوەختەی وێبگەڕ.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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>

لەگەڵ کۆنتڕۆڵەکان

زیادکردن لە کۆنتڕۆڵەکانی پێشوو و داهاتوودا:

<div id="carouselExampleControls" class="carousel slide" data-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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

لەگەڵ نیشاندەرەکان

هەروەها دەتوانیت نیشاندەرەکان زیاد بکەیت بۆ کارۆسێلەکە، شانبەشانی کۆنتڕۆڵەکان، هەروەها.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

لەگەڵ کەپشن

زیادکردنی کەپشن بۆ سلایدەکانت بە ئاسانی بە .carousel-captionتوخمەکە لەناو هەر .carousel-item. دەتوانرێت بە ئاسانی لەسەر دەرچەی بینینی بچووکتر بشاردرێتەوە، وەک لە خوارەوە نیشان دراوە، بە سوودمەندی پیشاندانی ئیختیاری . ئێمە سەرەتا بە دەیانشارینەوە .d-noneو دەیانهێنینەوە لەسەر ئامێری قەبارە مامناوەند بە .d-md-block.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

کرۆسفەید

زیاد بکە .carousel-fadeبۆ کارۆسێلەکەت بۆ ئەنیمەیشنکردنی سلایدەکان بە گواستنەوەی کاڵبوونەوە لەبری سلاید.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

زیاد بکە data-interval=""بۆ a .carousel-itemبۆ گۆڕینی بڕی کات بۆ دواکەوتن لە نێوان پاسکیلسواری ئۆتۆماتیکی بۆ بابەتی داهاتوو.

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

بەکارهێنان

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

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

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

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

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

$('.carousel').carousel()

بژاردەکان

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

ناو جۆر بنەڕەتی وەسف
نێوانیان ژماره‌ 5000 بڕی کات بۆ دواکەوتن لە نێوان پاسکیلکردنی ئۆتۆماتیکی شتێک. ئەگەر درۆ بێت، کارۆسێل بە شێوەیەکی ئۆتۆماتیکی خول ناکات.
کیبۆرد boolean ڕاست ئایا پێویستە کارۆسێلەکە کاردانەوەی هەبێت بەرامبەر بە ڕووداوەکانی کیبۆرد.
وچان ڕستە | boolean "hover"

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

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

سواربوون ڕستە هەڵە کارۆسێلەکە بە شێوەیەکی ئۆتۆماتیکی دەژەنێت دوای ئەوەی بەکارهێنەر بە دەستی یەکەم شت دەخولێنێتەوە. ئەگەر "کارۆسێل"، کارۆسێلەکە لە کاتی بارکردندا بە شێوەیەکی ئۆتۆماتیکی یاری دەکات.
پێچانەوە boolean ڕاست ئایا کارۆسێلەکە دەبێت بە بەردەوامی پاسکیل بسوڕێتەوە یان وێستگەی سەختی هەبێت.
دەست لێدان boolean ڕاست ئایا کارۆسێلەکە دەبێت پشتگیری لە کارلێکەکانی سوایپی چەپ/ڕاست بکات لەسەر ئامێرەکانی شاشەی تاچ.

شێوازەکان

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

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

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

.carousel(options)

کارۆسێلەکە بە بژاردەیەکی ئیختیاری objectدەستپێدەکات و دەست دەکات بە پاسکیلسواری لە ڕێگەی شتەکانەوە.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

لە چەپەوە بۆ ڕاست بەناو شتەکانی کارۆسێلدا دەسوڕێتەوە.

.carousel('pause')

کارۆسێلەکە لە پاسکیلسواری لە ڕێگەی شتەکانەوە ڕادەگرێت.

.carousel(number)

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

.carousel('prev')

خولگە دەکات بۆ بابەتی پێشوو. پێش ئەوەی بابەتی پێشوو پیشان بدرێت (واتە پێش ئەوەی slid.bs.carouselڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر.

.carousel('next')

خولگە دەکات بۆ بابەتی داهاتوو. پێش ئەوەی بابەتی داهاتوو پیشان بدرێت (واتە پێش ئەوەی slid.bs.carouselڕووداوەکە ڕووبدات) دەگەڕێتەوە بۆ پەیوەندیکەر.

.carousel('dispose')

کارۆسێلی توخمێک لەناو دەبات.

ڕووداوەکان

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

  • direction: ئەو ئاراستەیەی کە کارۆسێلەکە پێی دەخلیسکێت (یان "left"یان "right").
  • relatedTarget: ئەو توخمەی DOM کە وەک بابەتی چالاک دەخلیسکێتە شوێنی خۆی.
  • from: ئیندێکسی بابەتی ئێستا
  • to: ئیندێکسی بابەتی داهاتوو

هەموو ڕووداوەکانی کارۆسێلەکە لە خودی کارۆسێلەکە تەقە دەکرێن (واتە لە <div class="carousel">).

جۆری ڕووداو وەسف
slide.bs.carousel ئەم ڕووداوە دەستبەجێ ئاگر دەبێتەوە کاتێک slideشێوازی نموونە بانگهێشت دەکرێت.
slid.bs.کارۆسێل ئەم ڕووداوە کاتێک تەقێنراوە کە کارۆسێلەکە گواستنەوەی خلیسکێنەی خۆی تەواو کردبێت.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

ماوەی گواستنەوە بگۆڕە

ماوەی گواستنەوەی .carousel-itemدەتوانرێت بە $carousel-transitionگۆڕاوەی Sass پێش کۆمپایڵکردن بگۆڕدرێت یان شێوازە تایبەتەکان ئەگەر CSS ی کۆمپایڵکراو بەکاردەهێنیت. ئەگەر چەندین گواستنەوە جێبەجێ کرا، دڵنیابە کە سەرەتا گواستنەوەی گۆڕانکارییەکە پێناسە کراوە (بۆ نموونە transition: transform 2s ease, opacity .5s ease-out).