ক্যারোসেল

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

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

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

যেসব ব্রাউজারে পৃষ্ঠা দৃশ্যমানতা API সমর্থিত, সেখানে ক্যারোজেল স্লাইডিং এড়াবে যখন ওয়েবপৃষ্ঠাটি ব্যবহারকারীর কাছে দৃশ্যমান না হয় (যেমন যখন ব্রাউজার ট্যাব নিষ্ক্রিয় থাকে, ব্রাউজার উইন্ডো ছোট করা হয়, ইত্যাদি)।

অনুগ্রহ করে সচেতন থাকুন যে নেস্টেড ক্যারোসেলগুলি সমর্থিত নয় এবং ক্যারোসেলগুলি সাধারণত অ্যাক্সেসযোগ্যতার মানগুলির সাথে সঙ্গতিপূর্ণ নয়৷

সবশেষে, আপনি যদি উৎস থেকে আমাদের জাভাস্ক্রিপ্ট তৈরি করেন, তাহলে এটির প্রয়োজনutil.js ।

উদাহরণ

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

ঐচ্ছিক নিয়ন্ত্রণের জন্য একটি অনন্য আইডি সেট করতে ভুলবেন না .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.

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

প্রেজেন্ট কমোডো কার্সাস ম্যাগনা, 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>

ব্যবহার

ডেটা অ্যাট্রিবিউটের মাধ্যমে

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

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

জাভাস্ক্রিপ্টের মাধ্যমে

এর সাথে ম্যানুয়ালি ক্যারোজেল কল করুন:

$('.carousel').carousel()

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-, যেমনটি data-interval=""।

পদ্ধতি

.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')

একটি উপাদানের ক্যারোজেল ধ্বংস করে।

ঘটনা

বুটস্ট্র্যাপের ক্যারোজেল ক্লাস ক্যারোজেল কার্যকারিতা মধ্যে হুক করার জন্য দুটি ইভেন্ট প্রকাশ করে। উভয় ইভেন্টের নিম্নলিখিত অতিরিক্ত বৈশিষ্ট্য রয়েছে:

• direction: ক্যারোজেল যে দিকে স্লাইডিং হয় (হয় "left"বা "right")।
• relatedTarget: DOM উপাদান যা সক্রিয় আইটেম হিসাবে জায়গায় স্লাইড করা হচ্ছে৷
• from: বর্তমান আইটেমের সূচক
• to: পরবর্তী আইটেমের সূচী

সমস্ত ক্যারোজেল ইভেন্ট ক্যারোসেল নিজেই (অর্থাৎ <div class="carousel">) এ গুলি করা হয়।

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