Bootstrap 5 স্লাইডার

চুড়ামুখীভাবে / স্লাইড

চুড়ামুখীভাবে (ক্যারাসেল) একটি পুনরাবৃত্ত পদার্থ দেখানোর জন্য ব্যবহৃত স্লাইড হল:

কিভাবে চুড়ামুখীভাবে তৈরি করা যায়

এই উদাহরণটিতে ইনডিকেটর এবং নিয়ন্ত্রক সহ বেসিক ক্যারাসেল তৈরি করতে কিভাবে দেখানো হলো:

এখানে ইঞ্জেকশন যোগ করুন

<!-- ক্যারাসেল -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- ইনডিকেটর/পয়েন্ট -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  <!-- স্লাইড/ক্যারাসেল -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block w-100">
    </div>
  </div>
  <!-- ডান-বাম নিয়ন্ত্রক/আইকন -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

আপনার নিজেই চেষ্টা করুন

উদাহরণ ব্যাখ্যা

উপরোক্ত উদাহরণের শ্রেণীগুলোর কাজের বর্ণনা:

শ্রেণী বর্ণনা
.carousel ক্যারাসেল তৈরি করুন
.carousel-indicators ক্যারাসেলে ইনডিকেটর যোগ করুন।এটা প্রত্যেক স্লাইডের নিচে ছোট পয়েন্টগুলো
ক্যারাসেলে কতটি স্লাইড আছে এবং ব্যবহারকারী এখন কোনটি দেখছেন তা নির্দেশ করে
.carousel-inner স্লাইডকে ক্যারাসেলে যোগ করুন
.carousel-item প্রত্যেক স্লাইডের কনটেন্টকে নির্দিষ্ট করুন
.carousel-control-prev ক্যারাসেলে একটি বাম (পূর্ববর্তী) বাটন যোগ করুন, যার মাধ্যমে ব্যবহারকারী স্লাইডগুলোর মধ্যে পূর্বসরণ করতে পারবেন
.carousel-control-next ক্যারাসেলে একটি ডান (পরবর্তী) বাটন যোগ করুন, যার মাধ্যমে ব্যবহারকারী স্লাইডগুলোর মধ্যে অগ্রসর হতে পারবেন
.carousel-control-prev-icon এবং .carousel-control-prev সঙ্গে ব্যবহার করে 'পূর্ববর্তী' বাটন তৈরি করুন
.carousel-control-next-icon এবং .carousel-control-next সঙ্গে ব্যবহার করে 'পরবর্তী' বাটন তৈরি করুন
.slide একটি প্রকল্প থেকে আরেকটি প্রকল্পে হটার সময় সিএসএস ট্রানজিশন ও অ্যানিমেশন যোগ করুন
এই প্রভাবকে না চাইলে, এই শ্রেণীটিকে মুছে ফেলুন

স্লাইডকে শিরোনাম যোগ করুন

প্রত্যেকেই <div class="carousel-item"> এর মধ্যে <div class="carousel-caption"> প্রত্যেক স্লাইডকে শিরোনাম তৈরি করার জন্য:

এখানে ইঞ্জেকশন যোগ করুন

<div class="carousel-item">
  <img src="beijing.jpg" alt="বেইজিং">
  <div class="carousel-caption">
    <h3>বেইজিং</h3>
    <p>ধন্যবাদ, বেইজিং!</p>
  </div>
</div>

আপনার নিজেই চেষ্টা করুন