Carousel

عناصر کے ذریعے سائیکل چلانے کے لیے سلائیڈ شو کا جزو—تصاویر یا متن کی سلائیڈ—جیسے ایک carousel۔

یہ کیسے کام کرتا ہے

carousel مواد کی ایک سیریز کے ذریعے سائیکل چلانے کے لیے ایک سلائیڈ شو ہے، جسے CSS 3D ٹرانسفارمز اور تھوڑا سا JavaScript کے ساتھ بنایا گیا ہے۔ یہ تصاویر، متن، یا حسب ضرورت مارک اپ کی ایک سیریز کے ساتھ کام کرتا ہے۔ اس میں پچھلے/اگلے کنٹرولز اور اشارے کے لیے سپورٹ بھی شامل ہے۔

براؤزرز میں جہاں Page Visibility API کو سپورٹ کیا جاتا ہے، carousel اس وقت سلائیڈنگ سے گریز کرے گا جب ویب صفحہ صارف کو نظر نہیں آتا ہے (جیسے جب براؤزر ٹیب غیر فعال ہو، براؤزر ونڈو کو چھوٹا کر دیا جائے، وغیرہ)۔

براہ کرم آگاہ رہیں کہ نیسٹڈ carousels تعاون یافتہ نہیں ہیں، اور carousels عام طور پر رسائی کے معیارات کے مطابق نہیں ہیں۔

آخر میں، اگر آپ ہمارا جاوا اسکرپٹ ماخذ سے بنا رہے ہیں، تو اس کی ضرورت ہےutil.js ۔

مثال

Carousels خود بخود سلائیڈ کے طول و عرض کو معمول پر نہیں لاتے ہیں۔ اس طرح، آپ کو مواد کو مناسب سائز دینے کے لیے اضافی یوٹیلیٹیز یا حسب ضرورت اسٹائل استعمال کرنے کی ضرورت پڑ سکتی ہے۔ جبکہ carousels پچھلے/اگلے کنٹرولز اور اشارے کو سپورٹ کرتے ہیں، لیکن ان کی واضح طور پر ضرورت نہیں ہے۔ شامل کریں اور اپنی مرضی کے مطابق بنائیں جیسا کہ آپ مناسب دیکھیں۔

اختیاری کنٹرولز کے لیے پر ایک منفرد id سیٹ کرنا یقینی بنائیں .carousel، خاص طور پر اگر آپ ایک صفحے پر متعدد carousels استعمال کر رہے ہیں۔

صرف سلائیڈز

یہاں صرف سلائیڈز کے ساتھ ایک carousel ہے۔ براؤزر کی ڈیفالٹ امیج الائنمنٹ کو روکنے کے لیے carousel امیجز کی موجودگی کو نوٹ کریں .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>

سرخیوں کے ساتھ

.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 کی پوزیشن کو آسانی سے کنٹرول کرنے کے لیے ڈیٹا کی خصوصیات کا استعمال کریں۔ data-slideمطلوبہ الفاظ کو قبول کرتا ہے prevیا next، جو سلائیڈ کی پوزیشن کو اس کی موجودہ پوزیشن کے نسبت تبدیل کرتا ہے۔ متبادل طور پر، data-slide-toایک خام سلائیڈ انڈیکس کو carousel میں منتقل کرنے کے لیے استعمال کریں data-slide-to="2"، جو سلائیڈ کی پوزیشن کو ایک خاص انڈیکس میں منتقل کرتا ہے جس سے شروع ہوتا ہے 0۔

انتساب کا data-ride="carousel"استعمال ایک carousel کو صفحہ لوڈ سے شروع ہونے والے متحرک کے بطور نشان زد کرنے کے لیے کیا جاتا ہے۔ اسے ایک ہی carousel کے (فالتو اور غیر ضروری) واضح JavaScript ابتدا کے ساتھ استعمال نہیں کیا جا سکتا۔

جاوا اسکرپٹ کے ذریعے

carousel کو دستی طور پر اس کے ساتھ کال کریں:

$('.carousel').carousel()

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-، جیسا کہ میں data-interval=""۔

طریقے

.carousel(options)

ایک اختیاری اختیارات کے ساتھ carousel objectکو شروع کرتا ہے اور آئٹمز کے ذریعے سائیکل چلانا شروع کرتا ہے۔

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

بائیں سے دائیں تک carousel آئٹمز کے ذریعے سائیکل۔

.carousel('pause')

carousel کو آئٹمز کے ذریعے سائیکل چلانے سے روکتا ہے۔

.carousel(number)

carousel کو کسی خاص فریم پر چکر لگاتا ہے (0 پر مبنی، ایک صف کی طرح)۔ ٹارگٹ آئٹم کے دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی slid.bs.carouselواقعہ پیش آنے سے پہلے)۔

.carousel('prev')

پچھلی آئٹم پر سائیکل۔ پچھلی آئٹم کے دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی slid.bs.carouselواقعہ پیش آنے سے پہلے)۔

.carousel('next')

اگلی آئٹم پر سائیکل۔ اگلی آئٹم کے دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی slid.bs.carouselواقعہ پیش آنے سے پہلے)۔

.carousel('dispose')

ایک عنصر کے carousel کو تباہ کرتا ہے۔

تقریبات

بوٹسٹریپ کی carousel کلاس carousel کی فعالیت میں جڑنے کے لیے دو واقعات کو بے نقاب کرتی ہے۔ دونوں واقعات میں درج ذیل اضافی خصوصیات ہیں:

• direction: وہ سمت جس میں carousel پھسل رہا ہے (یا تو "left"یا "right")۔
• relatedTarget: DOM عنصر جس کو ایکٹو آئٹم کے طور پر جگہ پر سلائیڈ کیا جا رہا ہے۔
• from: موجودہ آئٹم کا اشاریہ
• to: اگلی آئٹم کا اشاریہ

تمام carousel واقعات carousel پر ہی فائر کیے جاتے ہیں (یعنی at the <div class="carousel">).

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