কেৰউজেল

উপাদানসমূহৰ মাজেৰে চাইক্লিং কৰাৰ বাবে এটা স্লাইডশ্ব' উপাদান—লিখনীৰ ছবি বা স্লাইডসমূহ—এটা কেৰউজেলৰ দৰে।

এই পৃষ্ঠাত

কেনেকৈ কাম কৰে

কেৰউজেলটো হৈছে এটা শৃংখলাৰ বিষয়বস্তুৰ মাজেৰে চাইকেল চলোৱাৰ বাবে এটা স্লাইডশ্বো, যিটো CSS 3D ৰূপান্তৰ আৰু অলপ জাভাস্ক্রিপ্টৰ সৈতে নিৰ্মিত। ই ছবি, লিখনী, বা স্বনিৰ্বাচিত মাৰ্কআপৰ শৃংখলাৰ সৈতে কাম কৰে। ইয়াত পূৰ্বৰ/পৰৱৰ্তী নিয়ন্ত্ৰণ আৰু সূচকৰ বাবে সমৰ্থন অন্তৰ্ভুক্ত কৰা হৈছে।

ব্ৰাউজাৰসমূহত য'ত পৃষ্ঠা দৃশ্যমানতা API সমৰ্থিত, কেৰউজেলে স্লাইড কৰাটো এৰাই চলিব যেতিয়া ৱেবপেজটো ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান নহয় (যেনে যেতিয়া ব্ৰাউজাৰ টেব নিষ্ক্ৰিয় হয়, ব্ৰাউজাৰ উইণ্ড' নূন্যতম কৰা হয়, ইত্যাদি)।

এই উপাদানৰ এনিমেচন প্ৰভাৱ prefers-reduced-motionমাধ্যম প্ৰশ্নৰ ওপৰত নিৰ্ভৰশীল। আমাৰ অভিগম্যতা নথিপত্ৰৰ হ্ৰাস কৰা গতি অংশ চাওক ।

অনুগ্ৰহ কৰি সচেতন হওক যে নেষ্টেড কেৰউজেলসমূহ সমৰ্থিত নহয়, আৰু কেৰউজেলসমূহ সাধাৰণতে অভিগম্যতা প্ৰামাণিকসমূহৰ সৈতে সামঞ্জস্যপূৰ্ণ নহয়।

উদাহৰণ

কেৰউজেলে স্লাইডৰ মাত্ৰাসমূহ স্বয়ংক্ৰিয়ভাৱে স্বাভাৱিক নকৰে। সেই হিচাপে, আপুনি উপযুক্তভাৱে বিষয়বস্তুৰ আকাৰ দিবলৈ অতিৰিক্ত সঁজুলিসমূহ বা স্বনিৰ্বাচিত শৈলীসমূহ ব্যৱহাৰ কৰিব লাগিব। কেৰউজেলে পূৰ্বৰ/পৰৱৰ্তী নিয়ন্ত্ৰণ আৰু সূচকসমূহ সমৰ্থন কৰে যদিও, সিহতৰ স্পষ্টভাৱে প্ৰয়োজনীয় নহয়। আপুনি উপযুক্তভাৱে যোগ কৰক আৰু কাষ্টমাইজ কৰক।

ক্লাছটো .activeএটা স্লাইডত যোগ কৰিব লাগিব অন্যথা কেৰউজেলটো দেখা নাপাব। লগতে বৈকল্পিক নিয়ন্ত্ৰণসমূহৰ বাবে এটা অনন্য সংহতি কৰাটো নিশ্চিত কৰক id, .carouselবিশেষকৈ যদি আপুনি এটা পৃষ্ঠাত একাধিক কেৰউজেল ব্যৱহাৰ কৰিছে। data-bs-targetনিয়ন্ত্ৰণ আৰু সূচক উপাদানসমূহৰ এটা বৈশিষ্ট্য থাকিব লাগিব (বা hrefসংযোগসমূহৰ বাবে) যি idউপাদানটোৰ .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এটা স্লাইডৰ পৰিৱৰ্তে এটা ফেড পৰিৱৰ্তনৰ সৈতে স্লাইডসমূহক এনিমেট কৰিবলৈ আপোনাৰ কেৰউজেলত যোগ কৰক । আপোনাৰ কেৰউজেল বিষয়বস্তুৰ ওপৰত নিৰ্ভৰ কৰি (যেনে, কেৱল লিখনী স্লাইডসমূহ), আপুনি সঠিক ক্ৰছফেডিঙৰ বাবে 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>

স্পৰ্শ চুইপিং নিষ্ক্ৰিয় কৰক

কেৰউজেলে স্লাইডসমূহৰ মাজত চলাবলৈ টাচস্ক্ৰীণ ডিভাইচসমূহত বাওঁ/সোঁফালে চুইপিং সমৰ্থন কৰে। 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>

কাষ্টম ট্ৰেঞ্জিচন

কম্পাইল কৰাৰ আগতে Sass চলকৰ .carousel-itemসৈতে সলনি কৰিব পাৰি $carousel-transition-durationবা স্বনিৰ্বাচিত শৈলীসমূহৰ সৈতে সলনি কৰিব পাৰি যদি আপুনি কমপাইল কৰা CSS ব্যৱহাৰ কৰিছে। যদি একাধিক পৰিৱৰ্তন প্ৰয়োগ কৰা হয়, নিশ্চিত কৰক যে ৰূপান্তৰ পৰিৱৰ্তন প্ৰথমে সংজ্ঞায়িত কৰা হৈছে (যেনে transition: transform 2s ease, opacity .5s ease-out) ।

ছাছ

চলকসমূহ

সকলো কেৰউজেলৰ বাবে চলকসমূহ:

$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-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

ব্যৱহাৰ

ডাটা এট্ৰিবিউটৰ জৰিয়তে

কেৰউজেলৰ অৱস্থান সহজে নিয়ন্ত্ৰণ কৰিবলৈ ডাটা এট্ৰিবিউট ব্যৱহাৰ কৰক। data-bs-slideমূলশব্দসমূহ গ্ৰহণ কৰে prevবা next, যি ইয়াৰ বৰ্তমান অৱস্থানৰ সাপেক্ষে স্লাইডৰ অৱস্থান সলনি কৰে। বৈকল্পিকভাৱে, data-bs-slide-toএটা কেঁচা স্লাইড সূচী কেৰউজেললৈ পাছ কৰিবলৈ ব্যৱহাৰ কৰক data-bs-slide-to="2", যি স্লাইডৰ অৱস্থানক ৰ পৰা আৰম্ভ হোৱা এটা নিৰ্দিষ্ট সূচীলৈ স্থানান্তৰ কৰে 0।

data-bs-ride="carousel"বৈশিষ্ট্যটোক পৃষ্ঠা লোডৰ পৰা আৰম্ভ কৰি এটা কেৰউজেলক এনিমেচন হিচাপে চিহ্নিত কৰিবলৈ ব্যৱহাৰ কৰা হয় । যদি আপুনি আপোনাৰ কেৰউজেল আৰম্ভ কৰিবলৈ ব্যৱহাৰ নকৰে , তেন্তে data-bs-ride="carousel"আপুনি নিজেই ইয়াক আৰম্ভ কৰিব লাগিব। ইয়াক একেটা কেৰউজেলৰ (অতিৰিক্ত আৰু অপ্ৰয়োজনীয়) স্পষ্ট জাভাস্ক্রিপ্ট আৰম্ভণিৰ সৈতে সংযুক্তভাৱে ব্যৱহাৰ কৰিব নোৱাৰি।

জাভাস্ক্রিপ্টৰ জৰিয়তে

কেৰউজেলক হস্তচালিতভাৱে কল কৰক:

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

বিকল্পসমূহ

যিহেতু বিকল্পসমূহক তথ্য বৈশিষ্ট্যসমূহ বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি, আপুনি এটা বিকল্পৰ নাম যোগ কৰিব পাৰে data-bs-, যেনে data-bs-animation="{value}". ডাটা বৈশিষ্ট্যসমূহৰ জৰিয়তে বিকল্পসমূহ পাছ কৰাৰ সময়ত বিকল্পৰ নামৰ কেছৰ ধৰণ “ camelCase ” ৰ পৰা “ kebab-case ” লৈ সলনি কৰাটো নিশ্চিত কৰক । উদাহৰণস্বৰূপে, data-bs-custom-class="beautifier"ৰ পৰিবৰ্তে ব্যৱহাৰ কৰক data-bs-customClass="beautifier"।

Bootstrap 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 পদ্ধতি এচিনক্ৰ'নাছ আৰু এটা পৰিৱৰ্তন আৰম্ভ কৰে । ট্ৰেঞ্জিচন আৰম্ভ হোৱাৰ লগে লগে কিন্তু শেষ হোৱাৰ আগতেই তেওঁলোকে কল কৰাজনৰ ওচৰলৈ উভতি যায় ৷ ইয়াৰ উপৰিও, এটা পৰিৱৰ্তনশীল উপাদানত এটা পদ্ধতি কল আওকাণ কৰা হ'ব ।

অধিক তথ্যৰ বাবে আমাৰ জাভাস্ক্রিপ্ট আলেখ্যন চাওক ।

আপুনি কেৰউজেল নিৰ্মাতাৰ সৈতে এটা কেৰউজেল উদাহৰণ সৃষ্টি কৰিব পাৰে, উদাহৰণস্বৰূপ, অতিৰিক্ত বিকল্পসমূহৰ সৈতে আৰম্ভ কৰিবলে আৰু বস্তুসমূহৰ মাজেৰে চাইক্লিং আৰম্ভ কৰিবলে:

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

প্রণালী	বিৱৰণ
`cycle`	কেৰউজেলৰ বস্তুবোৰৰ মাজেৰে বাওঁফালৰ পৰা সোঁফাললৈ চক্ৰান্ত কৰে।
`dispose`	এটা মৌলৰ কেৰউজেল ধ্বংস কৰে। (DOM উপাদানত সংৰক্ষিত তথ্য আঁতৰায়)
`getInstance`	স্থিতিশীল পদ্ধতি যি আপোনাক এটা DOM উপাদানৰ সৈতে জড়িত কেৰউজেল উদাহৰণ পাবলৈ অনুমতি দিয়ে, আপুনি ইয়াক এনেদৰে ব্যৱহাৰ কৰিব পাৰে: `bootstrap.Carousel.getInstance(element)`।
`getOrCreateInstance`	ষ্টেটিক পদ্ধতি যি এটা DOM উপাদানৰ সৈতে জড়িত এটা কেৰউজেল উদাহৰণ ঘূৰাই দিয়ে বা এটা নতুন সৃষ্টি কৰে যদি ইয়াক আৰম্ভ কৰা হোৱা নাছিল। আপুনি ইয়াক এনেদৰে ব্যৱহাৰ কৰিব পাৰে: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	পৰৱৰ্তী বস্তুলৈ চক্ৰ কৰে। পৰৱৰ্তী বস্তু দেখুওৱাৰ আগতে (যেনে, `slid.bs.carousel`ইভেন্টটো ঘটাৰ আগতে) কলাৰলৈ উভতি যায়।
`nextWhenVisible`	যেতিয়া পৃষ্ঠাটো দেখা নাযায় বা কেৰউজেল বা ইয়াৰ অভিভাৱক দেখা নাযায় তেতিয়া কেৰউজেলটো পৰৱৰ্তীলৈ চাইকেল নকৰিব। লক্ষ্য বস্তু দেখুওৱাৰ আগতে কলাৰলৈ উভতি যায় ।
`pause`	বস্তুৰ মাজেৰে চাইকেল চলোৱাৰ পৰা কেৰউজেল বন্ধ কৰে।
`prev`	পূৰ্বৰ বস্তুটোলৈ চক্ৰ কৰে। পূৰ্বৱৰ্তী বস্তু দেখুওৱাৰ আগতে (যেনে, `slid.bs.carousel`ইভেন্টটো ঘটাৰ আগতে) কলাৰলৈ উভতি যায়।
`to`	কেৰউজেলক এটা নিৰ্দিষ্ট ফ্ৰেমলৈ চক্ৰ কৰে (0 ভিত্তিত, এটা এৰেৰ দৰে)। লক্ষ্য বস্তু দেখুওৱাৰ আগতে (যেনে, `slid.bs.carousel`ইভেন্টটো ঘটাৰ আগতে) কলাৰলৈ উভতি যায়।

ইভেন্টসমূহ

বুটষ্ট্ৰেপৰ কেৰউজেল শ্ৰেণীয়ে কেৰউজেল কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে দুটা ইভেন্ট উন্মোচন কৰে। দুয়োটা ইভেন্টৰ নিম্নলিখিত অতিৰিক্ত বৈশিষ্ট্য আছে:

direction: কেৰউজেলটো যি দিশত ছিটিকি আছে (হয়টো "left"বা "right").
relatedTarget: সক্ৰিয় বস্তু হিচাপে ঠাইত স্লাইড কৰা DOM উপাদান।
from: বৰ্তমানৰ বস্তুটোৰ সূচী
to: পৰৱৰ্তী বস্তুটোৰ সূচী

সকলো কেৰউজেলৰ ইভেণ্ট কেৰউজেলৰ ওপৰত নিজেই (অৰ্থাৎ ) গুলীচালনা কৰা হয় <div class="carousel">।

ইভেন্টৰ ধৰণ	বিৱৰণ
`slid.bs.carousel`	কেৰউজেলে ইয়াৰ স্লাইড ট্ৰেঞ্জিচন সম্পূৰ্ণ কৰিলে গুলীচালনা কৰা হয়।
`slide.bs.carousel`	`slide`ইনষ্টেন্স পদ্ধতি আমন্ত্ৰণ কৰিলে তৎক্ষণাত ফায়াৰ কৰে ।

const myCarousel = document.getElementById('myCarousel')

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

কেৰউজেল

কেনেকৈ কাম কৰে

উদাহৰণ

কেৱল স্লাইডসমূহ

নিয়ন্ত্ৰণৰ সৈতে

সূচকৰ সৈতে

কেপচনৰ সৈতে

প্ৰথম স্লাইড লেবেল

দ্বিতীয় স্লাইড লেবেল

তৃতীয় স্লাইড লেবেল

ক্ৰছফেড

ব্যক্তিগত .carousel-itemব্যৱধান

স্পৰ্শ চুইপিং নিষ্ক্ৰিয় কৰক

ডাৰ্ক ভেৰিয়েন্ট

প্ৰথম স্লাইড লেবেল

দ্বিতীয় স্লাইড লেবেল

তৃতীয় স্লাইড লেবেল

কাষ্টম ট্ৰেঞ্জিচন

ছাছ

চলকসমূহ

ব্যৱহাৰ

ডাটা এট্ৰিবিউটৰ জৰিয়তে

জাভাস্ক্রিপ্টৰ জৰিয়তে

বিকল্পসমূহ

পদ্ধতিসমূহ

এচিংক্ৰ’নাছ পদ্ধতি আৰু পৰিৱৰ্তন

ইভেন্টসমূহ

ব্যক্তিগত `.carousel-item`ব্যৱধান