স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
Check
in English

ক্যারোসেল

উপাদানগুলির মাধ্যমে সাইকেল চালানোর জন্য একটি স্লাইডশো উপাদান—ছবি বা পাঠ্যের স্লাইড—যেমন একটি ক্যারোসেল৷

এই পৃষ্ঠায়

কিভাবে এটা কাজ করে

ক্যারোজেল হল একটি স্লাইডশো যাতে সাইকেল চালানোর জন্য কন্টেন্টের একটি সিরিজ, যা 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>

পরের আইটেমে স্বয়ংক্রিয়ভাবে সাইকেল চালানোর মধ্যে বিলম্বের সময় পরিবর্তন 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। .carouselনিয়ন্ত্রণগুলি তাদের ডিফল্ট সাদা ফিল থেকে filterCSS সম্পত্তির সাথে উল্টে দেওয়া হয়েছে। ক্যাপশন এবং কন্ট্রোলগুলিতে অতিরিক্ত 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>

কাস্টম রূপান্তর

আপনি যদি কম্পাইল করা CSS ব্যবহার করেন তবে কম্পাইল করার আগে বা কাস্টম স্টাইলগুলি Sass ভেরিয়েবলের সাথে পরিবর্তনের সময়কাল .carousel-itemপরিবর্তন করা যেতে পারে । $carousel-transition-durationযদি একাধিক ট্রানজিশন প্রয়োগ করা হয়, নিশ্চিত করুন যে রূপান্তর পরিবর্তনটি প্রথমে সংজ্ঞায়িত করা হয়েছে (যেমন 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"।

বুটস্ট্র্যাপ 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...
})