کارۆسێل

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

چۆن کاردەکات

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

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

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

لە کۆتاییدا ئەگەر جاڤاسکڕێپتەکەمان لە سەرچاوەوە دروست دەکەیت، پێویستی بە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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

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

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

پێشووتر دواتر

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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.

یەکەم ناوی سلاید

Nulla vitae elit libero، یەکێکە لە فارێترا ئاوگ مۆلیس ئینتەردوم.

دووەم ناوی سلاید

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە.

سێیەم ناوی سلاید

پرێسێنت کۆمۆدۆ کورسوس ماگنا، ڤێل سلێریسک نیسل کۆنسێکتێتور.

پێشووتر دواتر

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

کرۆسفەید

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

پێشووتر دواتر

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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-slideوشە سەرەکییەکان prevیان قبوڵ دەکات next، کە شوێنی سلایدەکە دەگۆڕێت بە بەراورد بە شوێنی ئێستای. یانیش، بەکاربهێنە data-slide-toبۆ گواستنەوەی ئیندێکسی خام سلاید بۆ کارۆسێلەکە data-slide-to="2"، کە شوێنی سلایدەکە دەگۆڕێت بۆ ئیندێکسێکی تایبەت کە بە 0.

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

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

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

$('.carousel').carousel()

بژاردەکان

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

شێوازەکان

.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">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

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

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