ڪارونجهر

عناصرن ذريعي سائيڪل هلائڻ لاءِ سلائيڊ شو جو جزو- تصويرن يا متن جي سلائيڊ- جهڙوڪ ڪارسيل.

اهو ڪيئن ڪم ڪري ٿو

ڪارسيل مواد جي هڪ سيريز ذريعي سائيڪل هلائڻ لاءِ هڪ سلائيڊ شو آهي، جيڪو CSS 3D ٽرانسفارمز ۽ ٿورو جاوا اسڪرپٽ سان ٺهيل آهي. اهو تصويرن، ٽيڪسٽ، يا ڪسٽم مارڪ اپ جي هڪ سيريز سان ڪم ڪري ٿو. اهو پڻ شامل آهي پوئين / ايندڙ ڪنٽرولن ۽ اشارن لاءِ سپورٽ.

برائوزرن ۾ جتي Page Visibility API جي مدد ڪئي ويندي آهي، carousel ان وقت سلائڊ ٿيڻ کان پاسو ڪندو جڏهن ويب پيج استعمال ڪندڙ کي نظر نه اچي (جهڙوڪ جڏهن برائوزر ٽيب غير فعال هجي، برائوزر ونڊو کي ننڍو ڪيو وڃي، وغيره).

ھن جزو جي متحرڪ اثر prefers-reduced-motionميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو .

مھرباني ڪري آگاهه رهو ته nested carousels سپورٽ نه آھن، ۽ carousels عام طور تي رسائي جي معيار سان مطابقت نه آھن.

آخرڪار، جيڪڏهن توهان اسان جي جاوا اسڪرپٽ ماخذ کان ٺاهي رهيا آهيو، ان جي ضرورت آهيutil.js .

مثال

Carousels خودڪار طريقي سان سلائڊ جي طول و عرض کي معمول نٿا ڪن. جيئن ته، توهان کي ضرورت هجي اضافي افاديت يا ڪسٽم اسلوب استعمال ڪرڻ لاءِ مواد کي مناسب انداز ۾. جڏهن ته carousels اڳوڻن / ايندڙ ڪنٽرولن ۽ اشارن جي حمايت ڪن ٿا، اهي واضح طور تي گهربل نه آهن. شامل ڪريو ۽ ترتيب ڏيو جيئن توھان مناسب ڏسو.

ڪلاس کي ھڪڙي سلائڊ ۾ شامل ڪرڻ جي .activeضرورت آھي ٻي صورت ۾ ڪارسيل نظر نه ايندو. .carouselاختياري ڪنٽرولن لاءِ خاص طور تي جيڪڏھن توھان ھڪڙي صفحي تي گھڻا carousels استعمال ڪري رھيا آھيو، ان تي ھڪ منفرد id مقرر ڪرڻ جي پڪ ڪريو. ڪنٽرول ۽ اشاري جي عناصرن کي لازمي طور تي ھڪڙي data-targetخاصيت (يا hrefلنڪ لاء) ھجڻ گھرجي جيڪا .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.

پهرين سلائڊ ليبل

Nulla vitae elit libero، a pharetra augue mollis interdum.

ٻيو سلائڊ ليبل

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

ٽيون سلائڊ ليبل

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

<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>

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

شامل ڪريو وقت جي مقدار کي تبديل data-interval=""ڪرڻ .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>

استعمال

ڊيٽا خاصيتن جي ذريعي

آساني سان carousel جي پوزيشن کي ڪنٽرول ڪرڻ لاء ڊيٽا خاصيتون استعمال ڪريو. data-slideلفظن کي قبول ڪري ٿو prevيا next، جيڪو سلائڊ پوزيشن کي ان جي موجوده پوزيشن جي نسبت سان تبديل ڪري ٿو. متبادل طور تي، استعمال ڪريو data-slide-toخام سلائڊ انڊيڪس ڪارسيل ڏانھن منتقل ڪرڻ لاء data-slide-to="2"، جيڪو سلائڊ پوزيشن کي ھڪڙي خاص انڊيڪس ڏانھن منتقل ڪري ٿو جيڪو شروع ٿئي ٿو 0.

data-ride="carousel"صفحو لوڊ تي شروع ٿيندڙ متحرڪ طور تي ڪارسيل کي نشان لڳائڻ لاءِ استعمال ڪيو ويندو آهي . جيڪڏهن توهان استعمال نٿا ڪريو data-ride="carousel"توهان جي carousel کي شروع ڪرڻ لاء، توهان کي ان کي پنهنجو پاڻ کي شروع ڪرڻو پوندو. اهو استعمال نه ٿو ڪري سگھجي (بيڪار ۽ غير ضروري) واضح JavaScript جي شروعات سان گڏ ساڳي ڪارسيل جي.

جاوا اسڪرپٽ ذريعي

ڪاريسل کي هٿ سان ڪال ڪريو:

$('.carousel').carousel()

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-، جيئن data-interval="".

نالو	قسم	ڊفالٽ	وصف
وقفو	نمبر	5000	وقت جو مقدار پاڻمرادو سائيڪل هلائڻ جي وچ ۾ دير ڪرڻ لاءِ. جيڪڏهن غلط، ڪارسيل خودڪار طريقي سان نه هلندو.
ڪي بورڊ	بولين	سچو	ڇا ڪارسيل کي ڪي بورڊ جي واقعن تي رد عمل ڏيڻ گهرجي.
روڪ	تار \| بولين	"هور"	جيڪڏهن سيٽ ڪيو ويو `"hover"`آهي ته، ڪارسيل جي سائيڪلنگ کي روڪي ٿو آن `mouseenter`۽ ڪارسيل جي سائيڪل کي ٻيهر شروع ڪري ٿو `mouseleave`. جيڪڏهن سيٽ ڪيو ويو ته `false`، ڪارسيل مٿان هوور ڪرڻ ان کي روڪي نه سگهندو. ٽچ-فعال ڊوائيسز تي، جڏهن سيٽ ڪيو ويو آهي `"hover"`، سائيڪل هلائڻ بند ٿي ويندي `touchend`(هڪ ڀيرو استعمال ڪندڙ ڪارسيل سان رابطو ختم ڪري) ٻن وقفن لاءِ، پاڻمرادو ٻيهر شروع ٿيڻ کان اڳ. نوٽ ڪريو ته اھو مٿي ڏنل ماؤس جي رويي کان علاوه آھي.
سواري	تار	ڪوڙو	استعمال ڪندڙ کي دستي طور تي پهرين شئي کي چڙهڻ کان پوءِ ڪارسيل کي خودڪار ڪري ٿو. جيڪڏهن "carousel"، لوڊ تي گاڏين کي خودڪار ڪري ٿو.
لپيٽڻ	بولين	سچو	ڇا ڪارسيل کي مسلسل سائيڪل هلائڻ گهرجي يا سخت اسٽاپ آهن.
ڇڪڻ	بولين	سچو	ڇا ڪارسيل کي ٽچ اسڪرين ڊيوائسز تي کاٻي/ ساڄي سوائپ واري رابطي کي سپورٽ ڪرڻ گهرجي.

طريقا

هم وقت سازي طريقا ۽ منتقلي

سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن موٽندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

وڌيڪ معلومات لاءِ اسان جا JavaScript دستاويز ڏسو .

`.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')`

هڪ عنصر جي carousel کي تباهه ڪري ٿو.

واقعا

بوٽ اسٽريپ جي ڪارسيل ڪلاس ٻن واقعن کي ظاهر ڪري ٿو ڪارسيل ڪارڪردگي ۾ ڇڪڻ لاءِ. ٻنهي واقعن ۾ هيٺيان اضافي خاصيتون آهن:

direction: اهو رخ جنهن ۾ ڪارسيل سلائيڊنگ آهي (يا "left"يا "right").
relatedTarget: DOM عنصر جيڪو فعال شيءِ جي طور تي جاءِ تي سلائيڊ ڪيو پيو وڃي.
from: موجوده شيءِ جو انڊيڪس
to: ايندڙ شئي جي انڊيڪس

سڀ ڪارسيل واقعا ڪارسيل تي فائر ڪيا ويا آهن (يعني تي <div class="carousel">).

واقعي جو قسم	وصف
slide.bs.carousel	اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن `slide`مثال جو طريقو سڏيو ويندو آهي.
slid.bs.carousel	اهو واقعو فائر ڪيو ويو آهي جڏهن ڪارسيل پنهنجي سلائڊ منتقلي کي مڪمل ڪيو آهي.

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

منتقلي جي مدت کي تبديل ڪريو

جي منتقلي جي مدت کي ترتيب ڏيڻ کان اڳ Sass متغير .carousel-itemسان تبديل ڪري سگھجي ٿو $carousel-transitionيا ڪسٽم اسلوب جيڪڏھن توھان مرتب ڪيل CSS استعمال ڪري رھيا آھيو. جيڪڏهن هڪ کان وڌيڪ منتقلي لاڳو ڪئي وئي آهي، پڪ ڪريو ته تبديلي جي منتقلي جي وضاحت ڪئي وئي آهي پهرين (مثال طور. transition: transform 2s ease, opacity .5s ease-out).