বুটস্ট্রাপ Carousel কম্পোনেন্ট এর ক্লাসগুলোর সহজ, সিম্পল বিশ্লেষণ

Bootstrap তাদের carousel component এর code এ কোন কোন class কেন ব্যবহার করেছে সেটা আমরা আজকে এখানে কিছুটা আলোচনা করার চেষ্টা করব।

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

.carousel .slide -> .carousel class এর সাহায্যে bootstrap নির্দেশ করছে যে আপনি একটি carousel / slider বানাচ্ছেন। .slide এইটা একটা optional class. Bootstrap carousel দুই ধরনের sliding animation support করে। ১) cross wide ২) slide । .slide class ব্যবহার করার মানে হল animation styling টা দুই নম্বর অপশন এর মত হবে। আর default ভাবে এক নম্বর অপশন এর মত দেখাবে।

data-bs-ride="carousel" -> এটা ব্যবহার করার মানে হল কোনও left / right control button না দিলেও automatic কিছুক্ষন পর পর slide গুলো change হতে থাকবে।

.carousel-inner -> আপনি carousel এর মধ্যে যতগুলো slide, text, image etc. ব্যবহার করবেন সব কিছু এই class এর under এ দিতে হবে। তাছাড়া, styling specially position এ বেশ কিছুটা difference দেখতে পাবেন which is not good at all.

.carousel-item -> প্রতিটা image কে এই class এর under এ styling দেওয়া হয়।

.active -> এর মানে হল webpage টা যতবার নতুনভাবে open করা হবে / refresh করা হবে, সবসময়ই এই image টা first time দেখাবে carousel এ। এটা জরুরি নয় যে প্রথম image এর মধ্যেই দিতে হবে। আপনার ১০ টা image থাকলে, আপনি চাইলে ১০ নম্বর image এর মদ্ধেও এটা ব্যবহার করতে পারেন ।

.carousel-control-prev .carousel-control-next -> যথাক্রমে previous & next image এ যাওয়ার জন্য দুইটা নির্দিষ্ট space কে ( left & right side of image ) define করা হয় ও style করা হয়।

.carousel-control-prev-icon .carousel-control-next-icon -> যথাক্রমে previous & next image এ যাওয়ার জন্য icon গুলোকে এর সাহায্যে style করা হয়।

~let's_code_your_career
~happy_coding!