ক্যারোসেল

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

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

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

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

এই উপাদানটির অ্যানিমেশন প্রভাব prefers-reduced-motionমিডিয়া প্রশ্নের উপর নির্ভর করে। আমাদের অ্যাক্সেসিবিলিটি ডকুমেন্টেশনের হ্রাসকৃত গতি বিভাগটি দেখুন ।

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

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

উদাহরণ

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

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

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

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

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

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

ক্যাপশন সহ

আপনার স্লাইডে ক্যাপশন যোগ করুন সহজেই .carousel-captionযেকোনো উপাদানের সাথে .carousel-item। ঐচ্ছিক ডিসপ্লে ইউটিলিটিগুলির সাথে নীচে দেখানো হিসাবে, ছোট ভিউপোর্টগুলিতে সেগুলি সহজেই লুকানো যেতে পারে ৷ আমরা প্রাথমিকভাবে সেগুলিকে এর সাথে লুকিয়ে রাখি .d-noneএবং মাঝারি আকারের ডিভাইসগুলিতে ফিরিয়ে আনি .d-md-block।

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

প্রথম স্লাইডের জন্য কিছু প্রতিনিধি স্থানধারক সামগ্রী।

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

দ্বিতীয় স্লাইডের জন্য কিছু প্রতিনিধি স্থানধারক সামগ্রী।

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

তৃতীয় স্লাইডের জন্য কিছু প্রতিনিধি স্থানধারক সামগ্রী।

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

ক্রসফেড

.carousel-fadeএকটি স্লাইডের পরিবর্তে একটি ফেইড ট্রানজিশন সহ স্লাইডগুলিকে অ্যানিমেট করতে আপনার ক্যারোজেলে যোগ করুন৷ আপনার ক্যারোজেল বিষয়বস্তুর উপর নির্ভর করে (যেমন, শুধুমাত্র টেক্সট স্লাইড), আপনি সঠিক ক্রসফেডিং এর জন্য s- .bg-bodyএ কিছু কাস্টম CSS যোগ করতে চাইতে পারেন।.carousel-item

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

স্বতন্ত্র `.carousel-item`ব্যবধান

পরের আইটেমে স্বয়ংক্রিয়ভাবে সাইকেল চালানোর মধ্যে বিলম্বের সময় পরিবর্তন data-interval=""করতে a যোগ করুন।.carousel-item

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

টাচ সোয়াইপিং অক্ষম করুন

ক্যারোসেলগুলি স্লাইডগুলির মধ্যে সরানোর জন্য টাচস্ক্রিন ডিভাইসগুলিতে বাম/ডানে সোয়াইপ করতে সমর্থন করে। এটি data-touchবৈশিষ্ট্য ব্যবহার করে নিষ্ক্রিয় করা যেতে পারে. নীচের উদাহরণটিও data-rideবৈশিষ্ট্য অন্তর্ভুক্ত করে না এবং data-interval="false"তাই এটি অটোপ্লে হয় না।

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

ব্যবহার

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

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

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

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

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

$('.carousel').carousel()

অপশন

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

নাম	টাইপ	ডিফল্ট	বর্ণনা
অন্তর	সংখ্যা	5000	একটি আইটেমকে স্বয়ংক্রিয়ভাবে সাইকেল চালানোর মধ্যে বিলম্বের পরিমাণ। যদি `false`, ক্যারোজেল স্বয়ংক্রিয়ভাবে চক্র হবে না.
কীবোর্ড	বুলিয়ান	সত্য	ক্যারোজেল কীবোর্ড ইভেন্টগুলিতে প্রতিক্রিয়া জানাবে কিনা।
বিরতি	স্ট্রিং \| বুলিয়ান	'হোভার'	যদি সেট করা থাকে `'hover'`, ক্যারোজেলের সাইক্লিংকে বিরতি দেয় এবং ক্যারোজেলের `mouseenter`সাইক্লিং আবার চালু করে `mouseleave`৷ যদি সেট করা হয় `false`, ক্যারোজেলের উপর ঘোরাফেরা করলে এটি থামবে না। স্পর্শ-সক্ষম ডিভাইসগুলিতে, যখন সেট করা হয় `'hover'`, সাইকেল চালানো `touchend`স্বয়ংক্রিয়ভাবে পুনরায় শুরু হওয়ার আগে দুই বিরতির জন্য (ব্যবহারকারী ক্যারোজেলের সাথে ইন্টারঅ্যাক্ট করা শেষ হলে) বিরতি দেবে। মনে রাখবেন যে এটি উপরের মাউসের আচরণ ছাড়াও।
অশ্বারোহণ	স্ট্রিং	মিথ্যা	ব্যবহারকারী ম্যানুয়ালি প্রথম আইটেমটি সাইকেল করার পরে ক্যারোজেলটি অটোপ্লে করে। যদি সেট করা থাকে `'carousel'`, লোড হলে ক্যারোজেলটি স্বয়ংক্রিয়ভাবে চালায়।
মোড়ানো	বুলিয়ান	সত্য	ক্যারোজেল ক্রমাগত সাইকেল চালাতে হবে নাকি হার্ড স্টপ থাকতে হবে।
স্পর্শ	বুলিয়ান	সত্য	ক্যারোজেল টাচস্ক্রিন ডিভাইসে বাম/ডান সোয়াইপ ইন্টারঅ্যাকশন সমর্থন করবে কিনা।

পদ্ধতি

অ্যাসিঙ্ক্রোনাস পদ্ধতি এবং রূপান্তর

সমস্ত API পদ্ধতি অসিঙ্ক্রোনাস এবং একটি রূপান্তর শুরু করে । রূপান্তর শুরু হওয়ার সাথে সাথেই কিন্তু এটি শেষ হওয়ার আগেই তারা কলারের কাছে ফিরে আসে । উপরন্তু, একটি রূপান্তরকারী উপাদানের উপর একটি পদ্ধতি কল উপেক্ষা করা হবে ।

আরও তথ্যের জন্য আমাদের জাভাস্ক্রিপ্ট ডকুমেন্টেশন দেখুন ।

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

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

`.carousel('nextWhenVisible')`

পৃষ্ঠাটি দৃশ্যমান না হলে বা ক্যারোজেল বা এর অভিভাবক দৃশ্যমান না হলে পরবর্তীতে ক্যারোজেলটি সাইকেল করবেন না৷ পরবর্তী আইটেম দেখানোর আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।slid.bs.carousel

`.carousel('to')`

ক্যারোজেলকে একটি নির্দিষ্ট ফ্রেমে সাইকেল করে (0 ভিত্তিক, অ্যারের মতো)। পরবর্তী আইটেম দেখানোর আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে।slid.bs.carousel

ঘটনা

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

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

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

ইভেন্টের ধরণ	বর্ণনা
slide.bs.carousel	এই ইভেন্টটি অবিলম্বে ফায়ার হয়ে যায় যখন `slide`ইনস্ট্যান্স পদ্ধতিটি চালু করা হয়।
slid.bs.carousel	যখন ক্যারোজেল তার স্লাইড ট্রানজিশন সম্পন্ন করে তখন এই ইভেন্টটি চালু করা হয়।

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

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

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