বুটস্ট্রাপ ক্যারোসেল প্লাগ-ইন
বুটস্ট্রাপ ক্যারোসেল প্লাগ-ইন হলো এলিমেন্টের মধ্যে চক্রাকারে ঘুরার জন্য একটি কম্পোনেন্ট(component), যেমনঃ একটি ক্যারোসেল (স্লাইডসো)।
কিভেবে একটি ক্যারোসেল তৈরি করবেন
কিভাবে একটি বেসিক ক্যারোসেল তৈরি করা যায় তা নিচের উদাহরণে দেখানো হলো:
kt_satt_skill_example_id=1146
উদাহরণের ব্যাখ্যা
আউটারমোস্ট ফাংশনের মাধ্যমে ক্যারোসেলকে নিয়ন্ত্রন করার জন্য ক্যারোসেলে একটি আইডি ব্যবহার করা হয় (এক্ষেত্রে ব্যবহার করা হয়েছে "Indicators" পার্ট: ইন্ডিকেটর হলো প্রত্যেকটি স্লাইডের নিচের ছোট গোল বৃত্ত (যার দ্বারা বুঝানো হয় যে, ক্যারোসেলে কতোগুলো স্লাইড রয়েছে এবং ইউজার বর্তমানে কোন স্লাইডটি দেখছে)। ইন্ডিকেটরগুলো একটি অর্ডার লিস্টে নির্দিষ্ট করে দেওয়া হয়, যাতে যখন ইউজার নির্দিষ্ট ডটে ক্লিক করে তখন কোন স্লাইডে যাবে তা নির্দিষ্ট করার জন্য "Wrapper for slides" পার্ট: স্লাইডগুলো প্রত্যেকটি স্লাইডের কন্টেন্টগুলো যেকোন একটি স্লাইডে অবশ্যই "Left এবং right কন্ট্রোল" পার্ট: এই কোডগুলোর মাধ্যমে "পূর্ববর্তী" এবং "পরবর্তী" বুঝায়, যার মাধ্যমে একজন ইউজার ইচ্ছে করলে পূর্বের এবং পরের স্লাইডগুলো ম্যানুয়েললি দেখতে পারে। প্রতিটি স্লাইডে ক্যাপশন তৈরি করার জন্য প্রত্যেকটি kt_satt_skill_example_id=1148 বুটস্ট্রাপ ক্যারেসেলের অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS ক্যারেসেল রেফারেন্স পেজে ভিজিট করুন।id="carouselId")।class="carousel" দ্বারা বুঝানো হয়েছে যে এই < div > টি একটি ক্যারোসেল বহন করছে।.slide ক্লাসের মাধ্যমে সিএসএস এর ট্রানজিশন এবং এ্যানিমেশন ইফেক্ট যুক্ত করা হয়েছে। নতুন আইটেমটিকে দেখানোর সময় এটিকে স্লাইড আকারে প্রদর্শন করে।
যদি আপনার এই ইফেক্টটির প্রয়োজন না হয়, তবে আপনি চাইলে এই ক্লাসটি বাদ দিতে পারেন।data-ride="carousel" এট্রিবিউটটি বুটস্ট্রাপকে পেজ লোড হওয়ার সাথে সাথে এ্যানিমেশন শুরু করার নির্দেশনা প্রদান করে।
.carousel-indicators ক্লাস ব্যবহার করা হয়।data-target এট্রিবিউটের মাধ্যমে ক্যারোসেলের আইডিকে লক্ষ্য করা হয়।data-slide-to এট্রিবিউট ব্যবহার করা হয়।
.carousel-inner ক্লাস যুক্ত < div > এলিমেন্টের মধ্যে রাখতে হবে।.item ক্লাস যুক্ত < div > এলিমেন্টের মধ্যে রাখতে হবে। কন্টেন্ট টেক্সট হতে পারে আবার ইমেজও হতে পারে।.active ক্লাস যুক্ত করতে হবে। অন্যথায় ক্যারোসেলটি দৃশ্যমান হবে না।
data-slide এট্রিবিউট "prev" অথবা "next" কী-ওয়ার্ড গ্রহন করে, যেটি স্লাইডকে রিলেটিভ অবস্থান থেকে বর্তমান অবস্থানে পরিবর্তন করে।স্লাইডে ক্যাপশন যুক্ত করা
< div class="item" > এর মধ্যে < div class="carousel-caption" > যুক্ত করুনঃবুটস্ট্রাপ ক্যারোসেলের সম্পূর্ণ রেফারন্স
Download Our Mobile Apps
