ক্যারোসেল

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

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

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

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

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

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

উদাহরণ

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

ক্লাসটি .activeস্লাইডগুলির একটিতে যোগ করতে হবে অন্যথায় ক্যারোজেলটি দৃশ্যমান হবে না। এছাড়াও ঐচ্ছিক নিয়ন্ত্রণের জন্য একটি অনন্য আইডি সেট করতে ভুলবেন না .carousel, বিশেষ করে যদি আপনি একটি একক পৃষ্ঠায় একাধিক ক্যারোসেল ব্যবহার করেন। কন্ট্রোল এবং ইন্ডিকেটর এলিমেন্টের অবশ্যই একটি data-targetঅ্যাট্রিবিউট (বা লিঙ্কের জন্য) থাকতে হবে যা এলিমেন্টের hrefআইডির সাথে মেলে ।.carousel

শুধুমাত্র স্লাইড

এখানে শুধুমাত্র স্লাইড সহ একটি ক্যারোজেল রয়েছে৷ ব্রাউজার ডিফল্ট ইমেজ সারিবদ্ধকরণ রোধ করতে ক্যারোজেল ইমেজের .d-blockউপস্থিতি নোট করুন ।.w-100

<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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>

ক্রসফেড

.carousel-fadeএকটি স্লাইডের পরিবর্তে একটি ফেইড ট্রানজিশন সহ স্লাইডগুলিকে অ্যানিমেট করতে আপনার ক্যারোজেলে যোগ করুন৷

আগে পরবর্তী

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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…
})

পরিবর্তনের সময়কাল পরিবর্তন করুন

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