ڪارونجهر

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

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

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

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

مھرباني ڪري آگاهه رهو ته 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 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، a pharetra augue mollis interdum.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

پويون اڳيان

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

استعمال

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

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

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

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

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

$('.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')

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

واقعا

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

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

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

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

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

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