Source

ڪارونجهر

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

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

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

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

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

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

مثال

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

اختياري ڪنٽرولن لاءِ تي هڪ منفرد id مقرر ڪرڻ جي پڪ .carouselڪريو، خاص طور تي جيڪڏهن توهان هڪ صفحي تي گھڻا carousels استعمال ڪري رهيا آهيو.

صرف سلائڊ

هتي صرف سلائڊن سان گڏ ڪارسيل آهي. برائوزر جي ڊفالٽ تصوير جي ترتيب کي روڪڻ لاءِ ڪارسيل تصويرن جي موجودگي کي نوٽ ڪريو .d-block..img-fluid

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>
شروعاتي فعال عنصر گهربل

ڪلاس کي ھڪڙي سلائڊ ۾ شامل ڪرڻ جي .activeضرورت آھي. ٻي صورت ۾، ڪارسيل نظر نه ايندي.

عنوانن سان

پنھنجي سلائڊ ۾ ڪيپشن شامل ڪريو آساني سان .carousel-captionعنصر سان ڪنھن به .carousel-item. اهي آساني سان لڪائي سگهجن ٿيون ننڍڙن ڏيک بندرن تي، جيئن هيٺ ڏيکاريل آهي، اختياري ڊسپلي افاديت سان . اسان انھن کي شروعات ۾ لڪايو .d-none۽ انھن کي وچولي سائيز جي ڊوائيسز تي واپس آڻيو .d-md-block.

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

استعمال

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

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

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

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

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

$('.carousel').carousel()

اختيارن

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

نالو قسم ڊفالٽ وصف
وقفو نمبر 5000 وقت جو مقدار پاڻمرادو سائيڪل هلائڻ جي وچ ۾ دير ڪرڻ لاءِ. جيڪڏهن غلط، ڪارسيل خودڪار طريقي سان نه هلندو.
ڪي بورڊ بولين سچو ڇا ڪارسيل کي ڪي بورڊ جي واقعن تي رد عمل ڏيڻ گهرجي.
روڪ تار | بولين "هور"

جيڪڏهن سيٽ ڪيو ويو "hover"آهي ته، ڪارسيل جي سائيڪلنگ کي روڪي ٿو آن mouseenter۽ ڪارسيل جي سائيڪل کي ٻيهر شروع ڪري ٿو mouseleave. جيڪڏهن سيٽ ڪيو ويو ته false، ڪارسيل مٿان هوور ڪرڻ ان کي روڪي نه سگهندو.

ٽچ-فعال ڊوائيسز تي، جڏهن سيٽ ڪيو ويو آهي "hover"، سائيڪل هلائڻ بند ٿي ويندي touchend(هڪ ڀيرو استعمال ڪندڙ ڪارسيل سان رابطو ختم ڪري) ٻن وقفن لاءِ، پاڻمرادو ٻيهر شروع ٿيڻ کان اڳ. نوٽ ڪريو ته اھو مٿي ڏنل ماؤس جي رويي کان علاوه آھي.

سواري تار ڪوڙو استعمال ڪندڙ کي دستي طور تي پهرين شئي کي چڙهڻ کان پوءِ ڪارسيل کي خودڪار ڪري ٿو. جيڪڏهن "carousel"، لوڊ تي گاڏين کي خودڪار ڪري ٿو.
لپيٽڻ بولين سچو ڇا ڪارسيل کي مسلسل سائيڪل هلائڻ گهرجي يا سخت اسٽاپ آهن.

طريقا

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

سڀ 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')

هڪ عنصر جي 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…
})