Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Material Design এর নীতির ওপর ভিত্তি করে তৈরি। এটি ওয়েবসাইট বা অ্যাপ্লিকেশনগুলির জন্য একটি শক্তিশালী স্লাইডার উপাদান প্রদান করে, যা বিভিন্ন ধরনের কনটেন্ট বা ইমেজ গ্যালারি সুন্দরভাবে প্রদর্শন করতে ব্যবহৃত হয়। Slider এবং Slides এর মাধ্যমে আপনি সহজেই স্লাইড শো বা গ্যালারি তৈরি করতে পারেন, যা ওয়েবসাইটের ভিজ্যুয়াল অভিজ্ঞতাকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে।
এখানে Materialize CSS এর Slider এবং Slides কনফিগার করার পদ্ধতি এবং কাস্টমাইজেশন নিয়ে বিস্তারিত আলোচনা করা হলো।
Slider তৈরি করা
Slider হল একটি একাধিক স্লাইড বা ইমেজের সিরিজ যা স্বয়ংক্রিয়ভাবে পরিবর্তিত হয় অথবা ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে। Materialize CSS এ স্লাইডার তৈরি করার জন্য স্লাইডার কনটেইনার এবং slide আইটেম ব্যবহার করা হয়।
১. Slider এর HTML স্ট্রাকচার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Slider</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<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>
</head>
<body>
<!-- Slider Structure -->
<div class="slider">
<ul class="slides">
<li>
<img src="https://placeimg.com/640/480/tech" alt="Tech Image">
<div class="caption center-align">
<h3>First Slide</h3>
<h5 class="light grey-text text-lighten-3">This is your first slide</h5>
</div>
</li>
<li>
<img src="https://placeimg.com/640/480/nature" alt="Nature Image">
<div class="caption left-align">
<h3>Second Slide</h3>
<h5 class="light grey-text text-lighten-3">This is your second slide</h5>
</div>
</li>
<li>
<img src="https://placeimg.com/640/480/animals" alt="Animals Image">
<div class="caption right-align">
<h3>Third Slide</h3>
<h5 class="light grey-text text-lighten-3">This is your third slide</h5>
</div>
</li>
</ul>
</div>
<script>
// Initialize Slider
$(document).ready(function(){
$('.slider').slider();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- slider: এটি মূল স্লাইডারের কন্টেইনার।
- slides: এখানে স্লাইডের প্রতিটি এলিমেন্ট থাকে।
- img: স্লাইডে ব্যবহৃত ছবি। আপনি ইমেজ বা কনটেন্ট রাখতে পারেন।
- caption: স্লাইডের টেক্সট বা কনটেন্ট দেখানোর জন্য ব্যবহৃত হয়।
২. Slider কাস্টমাইজেশন
Materialize CSS স্লাইডার কাস্টমাইজেশন এবং কনফিগারেশন করার জন্য বিভিন্ন অপশন প্রদান করে। আপনি স্লাইডার এর autoplay, interval, indicators, transition speed ইত্যাদি কনফিগার করতে পারেন।
$('.slider').slider({
indicators: true, // স্লাইডের নিচে পেজ ন্যাভিগেশন সিম্বল দেখাবে
height: 400, // স্লাইডের উচ্চতা নির্ধারণ
transition: 500, // স্লাইডের ট্রানজিশন স্পিড
interval: 3000 // স্লাইড পরিবর্তনের সময়কাল (3 সেকেন্ড)
});
- indicators: স্লাইডের নিচে ডট (নেভিগেশন পয়েন্ট) দেখাবে।
- height: স্লাইডার এর উচ্চতা কাস্টমাইজ করতে পারেন।
- transition: স্লাইডের পরিবর্তনের সময়কাল কাস্টমাইজ করা হয়।
- interval: এক স্লাইড থেকে পরবর্তী স্লাইডে যাওয়ার সময়কাল।
Slides কনফিগার করা
Slides কম্পোনেন্টটি সাধারণত একাধিক স্লাইড বা কনটেন্টের একটি সিরিজ প্রদর্শন করতে ব্যবহৃত হয়। Materialize CSS এ Slides খুবই শক্তিশালী এবং কাস্টমাইজযোগ্য একটি উপাদান।
১. Basic Slides 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>
কোড ব্যাখ্যা:
- carousel: এটি স্লাইডার বা carousel কনটেইনার।
- carousel-item: প্রতিটি স্লাইড বা কনটেন্ট আইটেম।
- carousel-slider: স্লাইডারের লেআউট স্টাইল।
- center: স্লাইড গুলিকে সেন্টারে প্রদর্শন করবে।
২. Slides কাস্টমাইজেশন
$('.carousel').carousel({
fullWidth: true, // স্লাইডারকে সম্পূর্ণ প্রস্থ দিয়ে দেখাবে
indicators: true, // স্লাইডের নিচে নেভিগেশন ডট থাকবে
duration: 500 // স্লাইড পরিবর্তনের সময়কাল ৫০০ মিলিসেকেন্ড
});
- fullWidth: স্লাইডারটি পুরো প্রস্থে প্রদর্শন করবে।
- indicators: নেভিগেশন ডট সক্রিয় হবে।
- duration: স্লাইড পরিবর্তনের সময়কাল।
উপসংহার
Materialize CSS এর Slider এবং Slides কম্পোনেন্ট দুটি অত্যন্ত শক্তিশালী এবং ইন্টারঅ্যাকটিভ উপাদান যা আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে ইমেজ গ্যালারি, প্রোডাক্ট শো-কেস, এবং অন্যান্য স্লাইডিং কনটেন্ট প্রদর্শন করতে ব্যবহৃত হয়। Slider সাধারণত একাধিক স্লাইড বা ইমেজ প্রদর্শন করতে ব্যবহৃত হয় এবং Slides কম্পোনেন্ট আরও কাস্টমাইজযোগ্য, যার মাধ্যমে আপনি বিভিন্ন কনটেন্ট আইটেম গ্রুপ করতে পারেন। Materialize CSS এ সহজে কনফিগার করা এবং কাস্টমাইজ করা যায়, যা আপনার ডিজাইনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে।
Read more
