কেৰউজেল

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

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

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

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

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

শেষত, যদি আপুনি আমাৰ জাভাস্ক্রিপ্ট উৎসৰ পৰা নিৰ্মাণ কৰিছে, ইয়াৰ বাবে প্ৰয়োজনutil.js ।

উদাহৰণ

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

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

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

ইয়াত কেৱল স্লাইড থকা এটা কেৰউজেল আছে। ব্ৰাউজাৰ অবিকল্পিত ছবি প্ৰান্তিককৰণ প্ৰতিৰোধ কৰিবলে কেৰউজেল ছবিসমূহত .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, এটা ফেৰেট্ৰা অগু মলিছ ইন্টাৰডাম।

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

লৰেম ইপ্সম ডলৰ বহা আমেট, কনচেক্টেটাৰ এডিপিচিং এলিট।

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

প্ৰেচেন্ট কমোডো কাৰ্ছাছ মেগনা, ভেল চেলেৰিস্ক নিছল কনচেক্টেটাৰ।

পূৰ্ৱবৰ্তী এটাৰ পাচৰ

<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…
})

পৰিৱৰ্তনৰ সময়সীমা সলনি কৰক

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