বুটস্ট্রাপ জেএস ক্যারোসেল (carousel.js)
ক্যারোসেল প্লাগ-ইন হলো এলিমেন্টের মধ্যে চক্রাকারে ঘুরার জন্য একটি কম্পোনেন্ট(component), যেমনঃ একটি ক্যারোসেল (স্লাইডসো)।
ক্যারোসেলের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ ক্যারোসেল টিউটোরিয়ালটি পড়ুন।
ক্যারোসেল প্লাগ-ইন ক্লাস
| Class | Description |
|---|---|
.carousel | ক্যারোসেল তৈরী করে। |
.slide | একটি আইটেম থেকে অন্য আইটেম এ স্লাইড করার সময় সিএসএস ট্রানজিশন এবং এনিমেশন যুক্ত করে। আপনি যদি এই ইফেক্ট না চান তাহলে এই ক্লাসটি বাদ দিয়ে দিন। |
.carousel-indicators | ক্যারোসেলের জন্য একটি ইন্ডিকেটর যুক্ত করে। এগুলো হলো প্রতিটি স্লাইডের নিচে ছোট ছোট ডট(যেগুলো দ্বারা বুঝায়, ক্যারোসেলে কতগুলো স্লাইড আছে, এবং বর্তমানে ইউজার কোন স্লাইডটি দেখছেন)। |
.carousel-inner | ক্যারোসেলে স্লাইড যুক্ত করে। |
.item | প্রতিটি স্লাইডের কন্টেন্টকে বুঝায়। |
.left carousel-control | ক্যারোসেলে একটি পূর্ববর্তী/Previous বাটন যুক্ত করে, যেটি ইউজারকে পিছনে যাওয়ার সুযোগ দেয়। |
.right carousel-control | ক্যারোসেলে একটি পরবর্তী/Next বাটন যুক্ত করে, যেটি ইউজারকে সামনে যাওয়ার সুযোগ দেয়। |
.carousel-caption | ক্যারেসেলের জন্য ক্যাপশন তৈরি করে। |
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
data-ride="carousel" এট্রিবিউট ক্যারোসেলকে একটিভ করে।
data-slide এবং data-slide-to এট্রিবিউটের মাধ্যমে একটি স্লাইড পরিবর্তিত হয়ে কোন স্লাইডে যাবে তা নির্দিষ্ট করে।
data-slide এট্রিবিউটে দুইটি ভ্যালু ব্যবহার করা যায়ঃ prev অথবা next, যেখানে data-slide-to তে নাম্বার ব্যবহার ব্যবহৃত হয়।
kt_satt_skill_example_id=1314
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
ম্যানুয়েললি যুক্ত করার জন্যঃ
kt_satt_skill_example_id=1316
বুটস্ট্রাপ ক্যারোসেল অপশন
অপশন data এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে পাস(pass) করতে পারে। data এট্রিবিউটের ক্ষেত্রে, অপশনের নাম "data-" সাথে যুক্ত করুন। যেমন; data-interval=""
| নাম | ধরন | ডিফল্ট | বিবরণ |
|---|---|---|---|
interval | number, or the boolean false | 5000 | একটি স্লাইড থেকে অন্য আরেকটি স্লাইডে যেতে কতো সময়(মিলিসেকেন্ডে) নিবে তা নির্দিষ্ট করে। নোটঃ স্বয়ংক্রিয় স্লাইডিং বন্ধ করার জন্য ইন্টারবাল false নির্ধারণ করুন। |
pause | string, or the boolean false | "hover" | যখন মাউস কার্সর স্লাইডে নেয়া হয় তখন ক্যারোসেলকে এক স্লাইড থেকে অন্য স্লাইডে যেতে বিরতি দেয়। আবার যখন মাউস কার্সর সরিয়ে নেয়া হয় তখন আবার ক্যারোসেল চালু হয়। নোটঃ হোভারের ক্ষেত্রে ক্ষমতা অক্ষম করে রাখতে চাইলে false নির্ধারন করুন। |
wrap | boolean | true | ক্যারোসেল কি বিরামহীনভাবে চলতেই থাকবে নাকি একবার চলার পর শেষ স্লাইডে বন্ধ হয়ে যাবে তা নির্দিষ্ট করে।
|
উদাহরণঃ জাভাস্ক্রিপ্ট ব্যবহার করে ক্যারোসেলের সবগুলো অপশনের ব্যবহার
kt_satt_skill_example_id=1317
উদাহরণঃ data-* এট্রিবিউট ব্যবহার করে ক্যারোসেলের সবগুলো অপশনের ব্যবহার
kt_satt_skill_example_id=1319
বুটস্ট্রাপ ক্যারোসেল মেথড
নিচের টেবিলে ক্যারোসেল মেথডগুলো দেয়া হলো।
| মেথড | বিবরণ |
|---|---|
.carousel(options) | একটি অপশন সহ ক্যারোসেল সচল করে। ভ্যালিড ভ্যালু জানার জন্য উপরে ক্যারোসেল অপশন দেখুন। |
.carousel("cycle") | ক্যারোসেলের আইটেমগুলো বাম থেকে ডানের দিকে যায়। |
.carousel("pause") | ক্যারোসেলকে বন্ধ করে দেয়। |
.carousel(number) | একটি বিশেষ বিষয়ের দিকে যায়(zero-based; প্রথম আইটেম হলো 0, দ্বিতীয় আইটেম হলো 1 ইত্যাদি..) |
.carousel("prev") | পূর্ববর্তী আইটেমের দিকে নিয়ে যায়। |
.carousel("next") | পরবর্তী আইটেমের দিকে নিয়ে যায়। |
নোটঃ মেথডগুলো সবগুলো নিয়ে জাভাস্ক্রিপ্ট অপশন উদাহরণ দেওয়া হয়েছে
বুটস্ট্রাপ ক্যারোসেল ইভেন্ট
নিচে টেবিলে ক্যারোসেল ইভেন্টগুলো দেয়া হলো।
| ইভেন্ট | বিবরণ | উদাহরণ |
|---|---|---|
slide.bs.carousel | এই ইভেন্টটি যখন ক্যারোসেল একটি আইটেম থেকে অন্য আরেকটি আইটেমে স্লাইড করা শুরু করে তখন ঘটে। | উদাহরণ দেখুন |
slid.bs.carousel | এই ইভেন্টটি যখন ক্যারোসেল একটি আইটেম থেকে অন্য আরেকটি আইটেমে স্লাইড করা শেষ করে তখন ঘটে। | উদাহরণ দেখুন |
Read more
