Source

কেৰউজেল

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

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

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

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

এই উপাদানৰ এনিমেচন প্ৰভাৱ prefers-reduced-motionমাধ্যম প্ৰশ্নৰ ওপৰত নিৰ্ভৰশীল। আমাৰ অভিগম্যতা নথিপত্ৰৰ হ্ৰাস কৰা গতি অংশ চাওক ।

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

শেষত, যদি আপুনি আমাৰ জাভাস্ক্রিপ্ট উৎসৰ পৰা নিৰ্মাণ কৰিছে, ইয়াৰ বাবে প্ৰয়োজন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 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>

নিয়ন্ত্ৰণৰ সৈতে

পূৰ্বৱৰ্তী আৰু পৰৱৰ্তী নিয়ন্ত্ৰণসমূহত যোগ কৰা:

<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>
  <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 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>
  <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।

<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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ক্ৰছফেড

.carousel-fadeএটা স্লাইডৰ পৰিৱৰ্তে এটা ফেড পৰিৱৰ্তনৰ সৈতে স্লাইডসমূহক এনিমেট কৰিবলৈ আপোনাৰ কেৰউজেলত যোগ কৰক ।

<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>
  <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-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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" 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"বৈশিষ্ট্যটোক পৃষ্ঠা লোডৰ পৰা আৰম্ভ কৰি এটা কেৰউজেলক এনিমেচন হিচাপে চিহ্নিত কৰিবলৈ ব্যৱহাৰ কৰা হয় । যদি আপুনি আপোনাৰ কেৰউজেল আৰম্ভ কৰিবলৈ ব্যৱহাৰ নকৰে , তেন্তে data-ride="carousel"আপুনি নিজেই ইয়াক আৰম্ভ কৰিব লাগিব। ইয়াক একেটা কেৰউজেলৰ (অতিৰিক্ত আৰু অপ্ৰয়োজনীয়) স্পষ্ট জাভাস্ক্রিপ্ট আৰম্ভণিৰ সৈতে সংযুক্তভাৱে ব্যৱহাৰ কৰিব নোৱাৰি।

জাভাস্ক্রিপ্টৰ জৰিয়তে

কেৰউজেলক হস্তচালিতভাৱে কল কৰক:

$('.carousel').carousel()

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-, যেনে data-interval="".

নাম প্ৰকাৰ ডিফল্ট বিৱৰণ
ব্যৱধান সংখ্যা ৫০০০ টকা এটা বস্তু স্বয়ংক্ৰিয়ভাৱে চাইকেল চলোৱাৰ মাজত বিলম্ব কৰিবলগীয়া সময়ৰ পৰিমাণ। যদি মিছা হয়, তেন্তে কেৰউজেলে স্বয়ংক্ৰিয়ভাৱে চাইকেল চলাব নোৱাৰে।
কিবৰ্ড বুলিয়ান সঁচা কিবৰ্ডৰ ইভেণ্টৰ প্ৰতি কেৰউজেলে প্ৰতিক্ৰিয়া প্ৰকাশ কৰিব লাগে নে নাই।
বিৰতি ষ্ট্ৰিং | বুলিয়ান "hover"

যদি লে সংহতি কৰে "hover", কেৰউজেলৰ চাইক্লিং অন কৰে mouseenterআৰু কেৰউজেলৰ চাইক্লিং পুনৰ আৰম্ভ কৰে mouseleave। যদি , লে সংহতি কৰা হয় false, কেৰউজেলৰ ওপৰত উৰিলে ইয়াক স্থগিত নকৰে।

স্পৰ্শ-সামৰ্থবান ডিভাইচসমূহত, যেতিয়া , লে সংহতি কৰা হৈছে "hover", চাইক্লিং অন হ'ব touchend(এবাৰ ব্যৱহাৰকাৰীয়ে কেৰউজেলৰ সৈতে পাৰস্পৰিক ক্ৰিয়া কৰা শেষ কৰিলে) দুটা ব্যৱধানৰ বাবে, স্বয়ংক্ৰিয়ভাৱে পুনৰাৰম্ভ কৰাৰ আগতে। মন কৰিব যে এইটো ওপৰৰ মাউছৰ আচৰণৰ অতিৰিক্ত।
চলোৱা তাঁৰ মিছা ব্যৱহাৰকাৰীয়ে প্ৰথম বস্তুটো হস্তচালিতভাৱে চক্ৰ কৰাৰ পিছত কেৰউজেলটো স্বয়ংক্ৰিয়ভাৱে প্লে কৰে। যদি "কেৰউজেল", লোডত কেৰউজেলটো স্বয়ংক্ৰিয়ভাৱে খেলে।
মেৰিওৱা বুলিয়ান সঁচা কেৰউজেলে অবিৰতভাৱে চাইকেল চলাব লাগে নে হাৰ্ড ষ্টপ থাকিব লাগে।
স্পৰ্শ বুলিয়ান সঁচা কেৰউজেলে টাচস্ক্ৰীণ ডিভাইচসমূহত বাওঁ/সোঁ চুইপ পাৰস্পৰিক ক্ৰিয়াসমূহ সমৰ্থন কৰিব লাগে নে নাই।

পদ্ধতিসমূহ

এচিংক্ৰ’নাছ পদ্ধতি আৰু পৰিৱৰ্তন

সকলো 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')

এটা মৌলৰ কেৰউজেল ধ্বংস কৰে।

ইভেন্টসমূহ

বুটষ্ট্ৰেপৰ কেৰউজেল শ্ৰেণীয়ে কেৰউজেল কাৰ্য্যকৰীতাত হুক কৰাৰ বাবে দুটা ইভেন্ট উন্মোচন কৰে। দুয়োটা ইভেন্টৰ নিম্নলিখিত অতিৰিক্ত বৈশিষ্ট্য আছে:

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

সকলো কেৰউজেলৰ ইভেণ্ট কেৰউজেলৰ ওপৰত নিজেই (অৰ্থাৎ ) গুলীচালনা কৰা হয় <div class="carousel">।

ইভেন্টৰ ধৰণ বিৱৰণ
স্লাইড.বি.এছ.কেৰউজেল এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া slideউদাহৰণ পদ্ধতি আমন্ত্ৰণ কৰা হয়।
slid.bs.কেৰউজেল এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া কেৰউজেলে ইয়াৰ স্লাইড ট্ৰেঞ্জিচন সম্পূৰ্ণ কৰে। 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

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

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