Carousel

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

اس صفحہ پر

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

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

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

prefers-reduced-motionاس جزو کا اینیمیشن اثر میڈیا کے استفسار پر منحصر ہے ۔ ہماری ایکسیسبیلٹی دستاویزات کا کم موشن سیکشن دیکھیں ۔

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

مثال

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

.activeکلاس کو کسی ایک سلائیڈ میں شامل کرنے کی ضرورت ہے بصورت دیگر carousel نظر نہیں آئے گا۔ idاختیاری کنٹرولز کے لیے پر ایک منفرد سیٹ کرنا بھی یقینی بنائیں .carousel، خاص طور پر اگر آپ ایک صفحے پر متعدد carousels استعمال کر رہے ہیں۔ کنٹرول اور اشارے کے عناصر میں ایک data-bs-targetخاصیت (یا hrefلنکس کے لیے) ہونی چاہیے جو عنصر سے مماثل idہو .carousel۔

صرف سلائیڈز

یہاں صرف سلائیڈز کے ساتھ ایک carousel ہے۔ براؤزر کی ڈیفالٹ امیج الائنمنٹ کو روکنے کے لیے carousel امیجز کی موجودگی کو نوٹ کریں .d-block۔.w-100

html

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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"۔

html

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

اشارے کے ساتھ

آپ کنٹرولز کے ساتھ ساتھ کیروسل میں اشارے بھی شامل کر سکتے ہیں۔

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

.carousel-captionکسی بھی کے اندر موجود عنصر کے ساتھ آسانی سے اپنی سلائیڈوں میں کیپشن شامل کریں .carousel-item۔ اختیاری ڈسپلے یوٹیلیٹیز کے ساتھ، جیسا کہ ذیل میں دکھایا گیا ہے، انہیں چھوٹے ویو پورٹ پر آسانی سے چھپایا جا سکتا ہے ۔ ہم ابتدائی طور پر انہیں چھپاتے ہیں .d-noneاور درمیانے درجے کے آلات پر واپس لاتے ہیں .d-md-block۔

پہلا سلائیڈ لیبل

پہلی سلائیڈ کے لیے کچھ نمائندہ پلیس ہولڈر مواد۔

دوسری سلائیڈ لیبل

دوسری سلائیڈ کے لیے کچھ نمائندہ پلیس ہولڈر مواد۔

تیسری سلائیڈ لیبل

تیسری سلائیڈ کے لیے کچھ نمائندہ پلیس ہولڈر مواد۔

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

کراس فیڈ

.carousel-fadeسلائیڈ کے بجائے فیڈ ٹرانزیشن کے ساتھ سلائیڈوں کو متحرک کرنے کے لیے اپنے کیروسل میں شامل کریں ۔ آپ کے carousel کے مواد پر منحصر ہے (مثال کے طور پر، صرف ٹیکسٹ سلائیڈز)، آپ مناسب کراس فیڈنگ کے لیے s .bg-bodyمیں کچھ حسب ضرورت CSS شامل کرنا چاہیں گے۔.carousel-item

html

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

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

اگلی آئٹم تک خود بخود سائیکل چلانے کے درمیان تاخیر کے لیے وقت کی مقدار کو تبدیل کرنے کے لیے data-bs-interval=""a میں شامل کریں ۔.carousel-item

html

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

ٹچ سوائپنگ کو غیر فعال کریں۔

Carousels سلائیڈوں کے درمیان منتقل کرنے کے لیے ٹچ اسکرین آلات پر بائیں/دائیں سوائپ کرنے کی حمایت کرتے ہیں۔ data-bs-touchاسے انتساب کا استعمال کرتے ہوئے غیر فعال کیا جا سکتا ہے ۔ data-bs-rideنیچے دی گئی مثال میں وصف بھی شامل نہیں ہے لہذا یہ آٹو پلے نہیں ہوتا ہے۔

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

گہرا ویرینٹ

گہرے کنٹرولز، اشارے اور کیپشنز کے لیے .carousel-darkشامل کریں ۔ کنٹرولز کو ان کے ڈیفالٹ وائٹ فل سے CSS پراپرٹی .carouselکے ساتھ الٹا کر دیا گیا ہے ۔ filterکیپشنز اور کنٹرولز میں اضافی Sass متغیرات ہیں جو colorاور کو اپنی مرضی کے مطابق بناتے ہیں background-color۔

پہلا سلائیڈ لیبل

پہلی سلائیڈ کے لیے کچھ نمائندہ پلیس ہولڈر مواد۔

دوسری سلائیڈ لیبل

دوسری سلائیڈ کے لیے کچھ نمائندہ پلیس ہولڈر مواد۔

تیسری سلائیڈ لیبل

تیسری سلائیڈ کے لیے کچھ نمائندہ پلیس ہولڈر مواد۔

html

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

اپنی مرضی کے مطابق منتقلی

اگر آپ مرتب کردہ سی ایس ایس استعمال کر رہے ہیں تو مرتب کرنے سے پہلے یا اپنی مرضی کے انداز کے ساتھ منتقلی کا دورانیہ ساس متغیر .carousel-itemکے ساتھ تبدیل کیا جا سکتا ہے ۔ $carousel-transition-durationاگر متعدد ٹرانزیشن لاگو ہوتے ہیں، تو یقینی بنائیں کہ ٹرانسفارم ٹرانزیشن پہلے بیان کی گئی ہے (مثال کے طور پر transition: transform 2s ease, opacity .5s ease-out)۔

سس

متغیرات

تمام carousels کے متغیرات:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

تاریک carousel کے متغیرات :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

استعمال

ڈیٹا اوصاف کے ذریعے

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

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

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

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

const carousel = new bootstrap.Carousel('#myCarousel')

اختیارات

چونکہ آپشنز کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے، آپ ایک آپشن کا نام شامل کر سکتے ہیں data-bs-، جیسا کہ میں data-bs-animation="{value}"۔ ڈیٹا انتساب کے ذریعے آپشنز کو پاس کرتے وقت آپشن کے نام کی کیس ٹائپ کو " کیمل کیس" سے " کباب کیس " میں تبدیل کرنا یقینی بنائیں۔ مثال کے طور پر، کے data-bs-custom-class="beautifier"بجائے استعمال کریں data-bs-customClass="beautifier"۔

بوٹسٹریپ 5.2.0 کے مطابق، تمام اجزاء ایک تجرباتی محفوظ ڈیٹا وصف کو سپورٹ کرتے data-bs-configہیں جو JSON سٹرنگ کے طور پر سادہ اجزاء کی ترتیب کو رکھ سکتا ہے۔ جب ایک عنصر data-bs-config='{"delay":0, "title":123}'اور data-bs-title="456"صفات ہوں گے تو حتمی titleقدر ہوگی 456اور علیحدہ ڈیٹا انتسابات پر دی گئی قدروں کو اوور رائڈ کریں گے data-bs-config۔ اس کے علاوہ، موجودہ ڈیٹا کے اوصاف JSON کی قدریں رکھنے کے قابل ہیں جیسے data-bs-delay='{"show":0,"hide":150}'۔

نام	قسم	طے شدہ	تفصیل
`interval`	نمبر	`5000`	کسی آئٹم کو خودکار طور پر سائیکل کرنے کے درمیان تاخیر کا وقت۔
`keyboard`	بولین	`true`	آیا کیروسل کو کی بورڈ ایونٹس پر رد عمل ظاہر کرنا چاہیے۔
`pause`	سٹرنگ، بولین	`"hover"`	پر سیٹ ہونے پر `"hover"`، کیروسل کی سائیکلنگ کو موقوف کرتا ہے اور آن `mouseenter`کیروسل کی سائیکلنگ کو دوبارہ شروع کرتا ہے `mouseleave`۔ پر سیٹ ہونے پر `false`، کیروسل پر منڈلانے سے یہ موقوف نہیں ہوگا۔ ٹچ سے چلنے والے آلات پر، پر سیٹ ہونے پر `"hover"`، سائیکلنگ `touchend`خود بخود دوبارہ شروع ہونے سے پہلے، دو وقفوں کے لیے (ایک بار جب صارف کیروسل کے ساتھ تعامل مکمل کر لیتا ہے) پر رک جائے گی۔ یہ ماؤس کے رویے کے علاوہ ہے۔
`ride`	سٹرنگ، بولین	`false`	اگر پر سیٹ کیا جاتا ہے تو `true`، صارف کی طرف سے پہلے آئٹم کو دستی طور پر سائیکل کرنے کے بعد کیروسل کو آٹو پلے کرتا ہے۔ پر سیٹ ہونے `"carousel"`پر، لوڈ ہونے پر کیروسل کو آٹو پلے کرتا ہے۔
`touch`	بولین	`true`	آیا کیروسل کو ٹچ اسکرین آلات پر بائیں/دائیں سوائپ کے تعاملات کو سپورٹ کرنا چاہیے۔
`wrap`	بولین	`true`	آیا کیروسل کو مسلسل سائیکل چلانا چاہیے یا سخت رک جانا چاہیے۔

طریقے

غیر مطابقت پذیر طریقے اور ٹرانزیشن

تمام API طریقے غیر مطابقت پذیر ہیں اور ایک منتقلی شروع کرتے ہیں ۔ منتقلی شروع ہوتے ہی وہ کال کرنے والے کے پاس واپس آ جاتے ہیں لیکن اس کے ختم ہونے سے پہلے ۔ اس کے علاوہ، منتقلی کے جزو پر میتھڈ کال کو نظر انداز کر دیا جائے گا ۔

مزید معلومات کے لیے ہماری جاوا اسکرپٹ دستاویزات دیکھیں ۔

آپ carousel کنسٹرکٹر کے ساتھ ایک carousel مثال بنا سکتے ہیں، مثال کے طور پر، اضافی اختیارات کے ساتھ شروع کرنا اور آئٹمز کے ذریعے سائیکل چلانا شروع کرنا:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

طریقہ	تفصیل
`cycle`	بائیں سے دائیں تک carousel آئٹمز کے ذریعے سائیکل۔
`dispose`	ایک عنصر کے carousel کو تباہ کرتا ہے۔ (DOM عنصر پر ذخیرہ شدہ ڈیٹا کو ہٹاتا ہے)
`getInstance`	جامد طریقہ جو آپ کو DOM عنصر سے وابستہ carousel مثال حاصل کرنے کی اجازت دیتا ہے، آپ اسے اس طرح استعمال کر سکتے ہیں: `bootstrap.Carousel.getInstance(element)`۔
`getOrCreateInstance`	جامد طریقہ جو DOM عنصر سے وابستہ carousel مثال واپس کرتا ہے یا اس کی ابتدا نہ ہونے کی صورت میں ایک نیا بناتا ہے۔ آپ اسے اس طرح استعمال کر سکتے ہیں: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	اگلی آئٹم پر سائیکل۔ اگلی آئٹم دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (مثال کے طور پر، `slid.bs.carousel`واقعہ پیش آنے سے پہلے)۔
`nextWhenVisible`	جب صفحہ نظر نہیں آرہا ہے یا carousel یا اس کا پیرنٹ نظر نہیں آرہا ہے تو کیروسل کو اگلے پر نہ چلائیں۔ ٹارگٹ آئٹم کے دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے ۔
`pause`	carousel کو آئٹمز کے ذریعے سائیکل چلانے سے روکتا ہے۔
`prev`	پچھلی آئٹم پر سائیکل۔ پچھلی آئٹم کے دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (مثال کے طور پر، `slid.bs.carousel`واقعہ پیش آنے سے پہلے)۔
`to`	carousel کو کسی خاص فریم پر چکر لگاتا ہے (0 پر مبنی، ایک صف کی طرح)۔ ٹارگٹ آئٹم کے دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (مثال کے طور پر، `slid.bs.carousel`واقعہ ہونے سے پہلے)۔

تقریبات

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

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

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

واقعہ کی قسم	تفصیل
`slid.bs.carousel`	جب carousel نے اپنی سلائیڈ کی منتقلی مکمل کر لی ہے تو فائر کیا گیا۔
`slide.bs.carousel`	`slide`جب مثال کے طریقے کو استعمال کیا جاتا ہے تو فوری طور پر آگ لگ جاتی ہے۔

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

Carousel

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

مثال

صرف سلائیڈز

کنٹرولز کے ساتھ

اشارے کے ساتھ

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

پہلا سلائیڈ لیبل

دوسری سلائیڈ لیبل

تیسری سلائیڈ لیبل

کراس فیڈ

انفرادی .carousel-itemوقفہ

ٹچ سوائپنگ کو غیر فعال کریں۔

گہرا ویرینٹ

پہلا سلائیڈ لیبل

دوسری سلائیڈ لیبل

تیسری سلائیڈ لیبل

اپنی مرضی کے مطابق منتقلی

سس

متغیرات

استعمال

ڈیٹا اوصاف کے ذریعے

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

اختیارات

طریقے

غیر مطابقت پذیر طریقے اور ٹرانزیشن

تقریبات

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