in English

ڪارونجهر

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

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

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

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

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

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

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

مثال

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

ڪلاس کي ھڪڙي سلائڊ ۾ شامل ڪرڻ جي .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>

ڪنٽرول سان

پوئين ۽ ايندڙ ڪنٽرول ۾ شامل ڪرڻ. اسان عناصر استعمال ڪرڻ جي صلاح <button>ڏيو ٿا، پر توھان پڻ <a>عناصر استعمال ڪري سگھو ٿا role="button".

<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>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

ڪراس فيڊ

سلائڊ کي متحرڪ ڪرڻ لاءِ پنھنجي ڪارسيل ۾ شامل ڪريو .carousel-fadeھڪڙي سلائڊ جي بدران فيڊ ٽرانسشن سان. توهان جي ڪارسيل مواد تي منحصر آهي (مثال طور، متن صرف سلائڊ)، توهان شايد شامل ڪرڻ چاهيو ٿا .bg-bodyيا ڪجهه ڪسٽم CSS کي .carousel-itemمناسب ڪراس فيڊنگ لاء.

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

شامل ڪريو وقت جي مقدار کي تبديل 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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

ٽچ سوائپنگ کي بند ڪريو

Carousels ٽچ اسڪرين ڊوائيسز تي کاٻي/ساڄي سوائپ ڪرڻ جي حمايت ڪن ٿا ته جيئن سلائڊن جي وچ ۾ منتقل ٿئي. data-touchهي خاصيت استعمال ڪندي غير فعال ٿي سگهي ٿو . هيٺ ڏنل مثال پڻ شامل نه آهي data-rideوصف شامل آهي ۽ انهي data-interval="false"ڪري اهو خودڪار نٿو ٿئي.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
  <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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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 ڪنهن شئي کي پاڻمرادو سائيڪل هلائڻ جي وچ ۾ دير ڪرڻ جو وقت. جيڪڏهن false, carousel خودڪار طريقي سان سائيڪل نه ڪندو.
ڪي بورڊ بولين سچو ڇا ڪارسيل کي ڪي بورڊ جي واقعن تي رد عمل ڏيڻ گهرجي.
روڪ تار | بولين 'هور'

جيڪڏهن سيٽ ڪيو ويو '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 کي تباهه ڪري ٿو.

.carousel('nextWhenVisible')

جڏهن صفحو نظر نه ٿو اچي يا ڪارسيل يا ان جو والدين نظر نه اچي رهيو آهي ته ڪارسيل کي اڳتي نه وڌايو. ايندڙ شيون ڏيکاريو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي .slid.bs.carousel

.carousel('to')

ڪارسيل کي ھڪڙي خاص فريم ڏانھن (0 جي بنياد تي، ھڪڙي صف سان ملندڙ جلندڙ). ايندڙ شيون ڏيکاريو ويو آهي (يعني واقعي ٿيڻ کان اڳ) ڪالر ڏانهن واپسي .slid.bs.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).