ফাংশনের মাধ্যমে ক্যারোসেলকে নিয়ন্ত্রন করার জন্য ক্যারোসেলে একটি আইডি ব্যবহার করা হয় (এক্ষেত্রে ব্যবহার করা হয়েছে id="carouselId")।

class="carousel" দ্বারা বুঝানো হয়েছে যে এই < div > টি একটি ক্যারোসেল বহন করছে।

.slide ক্লাসের মাধ্যমে সিএসএস এর ট্রানজিশন এবং এ্যানিমেশন ইফেক্ট যুক্ত করা হয়েছে। নতুন আইটেমটিকে দেখানোর সময় এটিকে স্লাইড আকারে প্রদর্শন করে।
যদি আপনার এই ইফেক্টটির প্রয়োজন না হয়, তবে আপনি চাইলে এই ক্লাসটি বাদ দিতে পারেন।

data-ride="carousel" এট্রিবিউটটি বুটস্ট্রাপকে পেজ লোড হওয়ার সাথে সাথে এ্যানিমেশন শুরু করার নির্দেশনা প্রদান করে।

"Indicators" পার্ট:

ইন্ডিকেটর হলো প্রত্যেকটি স্লাইডের নিচের ছোট গোল বৃত্ত (যার দ্বারা বুঝানো হয় যে, ক্যারোসেলে কতোগুলো স্লাইড রয়েছে এবং ইউজার বর্তমানে কোন স্লাইডটি দেখছে)।

ইন্ডিকেটরগুলো একটি অর্ডার লিস্টে নির্দিষ্ট করে দেওয়া হয়, যাতে .carousel-indicators ক্লাস ব্যবহার করা হয়।

data-target এট্রিবিউটের মাধ্যমে ক্যারোসেলের আইডিকে লক্ষ্য করা হয়।

যখন ইউজার নির্দিষ্ট ডটে ক্লিক করে তখন কোন স্লাইডে যাবে তা নির্দিষ্ট করার জন্য data-slide-to এট্রিবিউট ব্যবহার করা হয়।

"Wrapper for slides" পার্ট:

স্লাইডগুলো .carousel-inner ক্লাস যুক্ত < div > এলিমেন্টের মধ্যে রাখতে হবে।

প্রত্যেকটি স্লাইডের কন্টেন্টগুলো .item ক্লাস যুক্ত < div > এলিমেন্টের মধ্যে রাখতে হবে। কন্টেন্ট টেক্সট হতে পারে আবার ইমেজও হতে পারে।

যেকোন একটি স্লাইডে অবশ্যই .active ক্লাস যুক্ত করতে হবে। অন্যথায় ক্যারোসেলটি দৃশ্যমান হবে না।

"Left এবং right কন্ট্রোল" পার্ট:

এই কোডগুলোর মাধ্যমে "পূর্ববর্তী" এবং "পরবর্তী" বুঝায়, যার মাধ্যমে একজন ইউজার ইচ্ছে করলে পূর্বের এবং পরের স্লাইডগুলো ম্যানুয়েললি দেখতে পারে।

data-slide এট্রিবিউট "prev" অথবা "next" কী-ওয়ার্ড গ্রহন করে, যেটি স্লাইডকে রিলেটিভ অবস্থান থেকে বর্তমান অবস্থানে পরিবর্তন করে।

স্লাইডে ক্যাপশন যুক্ত করা

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

kt_satt_skill_example_id=1148

বুটস্ট্রাপ ক্যারোসেলের সম্পূর্ণ রেফারন্স

বুটস্ট্রাপ ক্যারেসেলের অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS ক্যারেসেল রেফারেন্স পেজে ভিজিট করুন।