Carousel হলো একটি ভিজ্যুয়াল কম্পোনেন্ট যা একটি সিরিজ ইমেজ বা কনটেন্টকে স্লাইড বা স্ক্রল করার মাধ্যমে প্রদর্শন করে। এটি ওয়েবসাইটে সাধারণত প্রোডাক্ট শোकेস, গ্যালারি, বা নিউজ ফিডের মতো বিভিন্ন কনটেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়। Materialize CSS এর মাধ্যমে খুব সহজেই একটি Carousel তৈরি করা যায়, যা ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।
এখানে Materialize CSS এর মাধ্যমে Carousel তৈরি এবং কনফিগার করার পদ্ধতি আলোচনা করা হলো।
Carousel তৈরি করা
Materialize CSS-এ একটি Carousel তৈরি করতে carousel ক্লাস ব্যবহার করতে হয়। Carousel সাধারণত ইমেজ বা কনটেন্টের একটি স্লাইড শো যা ব্যবহারকারীর জন্য ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় উপস্থাপনা প্রদান করে।
১. Carousel HTML কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Carousel Example</title>
<!-- Materialize CSS Link -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Carousel Structure -->
<div class="carousel carousel-slider center">
<div class="carousel-item red white-text" href="#one!">
<h2>First Slide</h2>
<p class="white-text">This is your first slide</p>
</div>
<div class="carousel-item amber white-text" href="#two!">
<h2>Second Slide</h2>
<p class="white-text">This is your second slide</p>
</div>
<div class="carousel-item green white-text" href="#three!">
<h2>Third Slide</h2>
<p class="white-text">This is your third slide</p>
</div>
<div class="carousel-item blue white-text" href="#four!">
<h2>Fourth Slide</h2>
<p class="white-text">This is your fourth slide</p>
</div>
</div>
<!-- Materialize JS Link -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- carousel: এটি কারোসেল উপাদানের জন্য মূল ক্লাস, যা স্লাইড শো তৈরি করে।
- carousel-item: এটি প্রতিটি স্লাইড বা আইটেমের জন্য ব্যবহৃত ক্লাস।
- carousel-slider: এটি স্লাইড শো হিসেবে ডিফল্ট স্টাইল প্রদান করে।
- center: এটি স্লাইডগুলিকে মাঝখানে অবস্থান করে।
২. Carousel Initialization
Materialize CSS এর সাথে Carousel ব্যবহার করতে JavaScript এ ইনিশিয়ালাইজেশন করা প্রয়োজন। এই কাজটি $(document).ready() ফাংশনের মধ্যে করা হয়।
$(document).ready(function(){
$('.carousel').carousel();
});
এটি ওয়েব পেজটি লোড হওয়ার পর Carousel কে স্বয়ংক্রিয়ভাবে ইনিশিয়ালাইজ করে এবং স্লাইড শোটি কাজ করতে শুরু করে।
Carousel কাস্টমাইজেশন
Materialize CSS-এ Carousel এর সাথে কিছু অতিরিক্ত কাস্টমাইজেশন যোগ করা যেতে পারে, যেমন অটো স্লাইডিং, স্লাইডের স্পিড, নেভিগেশন বাটন, ইত্যাদি।
১. Auto Sliding এবং Interval সেট করা
আপনি চাইলে auto sliding ফিচার ব্যবহার করতে পারেন, যা স্বয়ংক্রিয়ভাবে স্লাইডিং শুরু করবে এবং প্রতিটি স্লাইডের জন্য একটি নির্দিষ্ট সময়ের পর স্লাইডটি পরিবর্তন হবে।
$(document).ready(function(){
$('.carousel').carousel({
fullWidth: true,
indicators: true, // নেভিগেশন পয়েন্ট বা ডট
noWrap: false, // শেষ স্লাইডের পর পুনরায় প্রথম স্লাইডে না যাওয়া
interval: 2000 // স্লাইড পরিবর্তনের সময় (মিলিসেকেন্ড)
});
});
এখানে:
- fullWidth: স্লাইডের জন্য পুরো প্রস্থ ব্যবহার করতে সেট করা হয়েছে।
- indicators: এটি স্লাইডের নেভিগেশন পয়েন্ট বা ডট প্রদর্শন করে।
- noWrap: এটি স্লাইড শেষ হওয়ার পর প্রথম স্লাইডে ফিরে না যেতে বলে।
- interval: এটি স্লাইড পরিবর্তনের সময় নির্ধারণ করে (এখানে ২০০০ মিলিসেকেন্ড বা ২ সেকেন্ড)।
২. Carousel Control (Prev/Next) বাটন যোগ করা
আপনি next এবং prev বাটনও যোগ করতে পারেন, যাতে ব্যবহারকারীরা ম্যানুয়ালি স্লাইডগুলির মধ্যে নেভিগেট করতে পারে।
<a class="carousel-prev" href="javascript:void(0);" onclick="$('.carousel').carousel('prev')">Prev</a>
<a class="carousel-next" href="javascript:void(0);" onclick="$('.carousel').carousel('next')">Next</a>
এখানে:
- carousel-prev: এই ক্লাসটি পূর্ববর্তী স্লাইডে নেভিগেট করতে ব্যবহৃত হয়।
- carousel-next: এই ক্লাসটি পরবর্তী স্লাইডে নেভিগেট করতে ব্যবহৃত হয়।
- $('.carousel').carousel('prev') এবং $('.carousel').carousel('next') এর মাধ্যমে স্লাইড পরিবর্তন করা হয়।
উপসংহার
Materialize CSS এর Carousel একটি শক্তিশালী এবং ইন্টারঅ্যাকটিভ কম্পোনেন্ট, যা ওয়েবসাইটে বিভিন্ন ধরনের কনটেন্ট যেমন ইমেজ, প্রোডাক্ট, বা সংবাদ প্রদর্শনের জন্য ব্যবহৃত হয়। আপনি খুব সহজেই Materialize CSS ব্যবহার করে একটি responsive এবং dynamic carousel তৈরি করতে পারেন, যা আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং ব্যবহারযোগ্য করে তোলে। স্লাইডগুলির জন্য বিভিন্ন কাস্টমাইজেশন যেমন অটো স্লাইডিং, স্লাইড স্পিড, এবং নেভিগেশন বাটনগুলি ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করতে সাহায্য করে।
Read more
