Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা বিভিন্ন ধরনের ইন্টারঅ্যাকটিভ উপাদান প্রদান করে, যেমন Sliders (স্লাইডার)। স্লাইডার একটি জনপ্রিয় উপাদান, যা ওয়েবসাইটে বিভিন্ন কনটেন্ট বা ছবি প্রদর্শনের জন্য ব্যবহৃত হয়। Materialize CSS স্লাইডারকে সহজে কাস্টমাইজ এবং auto-play ফিচার যোগ করার জন্য অনেক সুবিধা প্রদান করে, যা ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে।
এখানে auto-play এবং custom slider animation তৈরির পদ্ধতি বিস্তারিতভাবে আলোচনা করা হলো।
Materialize CSS এ স্লাইডার তৈরি করা
Materialize CSS-এ স্লাইডার তৈরির জন্য slider ক্লাস ব্যবহার করা হয়। স্লাইডারকে বিভিন্ন ধরনের কনটেন্ট বা ছবি প্রদর্শন করতে ব্যবহৃত হতে পারে।
স্লাইডার উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize Slider Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Slider Structure -->
<div class="slider">
<ul class="slides">
<li>
<img src="https://via.placeholder.com/800x400?text=Slide+1"> <!-- Random Image -->
<div class="caption center-align">
<h3>Welcome to Our Website!</h3>
<h5 class="light grey-text text-lighten-3">This is the first slide.</h5>
</div>
</li>
<li>
<img src="https://via.placeholder.com/800x400?text=Slide+2"> <!-- Random Image -->
<div class="caption left-align">
<h3>Discover New Features</h3>
<h5 class="light grey-text text-lighten-3">This is the second slide.</h5>
</div>
</li>
<li>
<img src="https://via.placeholder.com/800x400?text=Slide+3"> <!-- Random Image -->
<div class="caption right-align">
<h3>Join Us Now</h3>
<h5 class="light grey-text text-lighten-3">This is the third slide.</h5>
</div>
</li>
</ul>
</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>
<!-- Initialize Slider -->
<script>
$(document).ready(function(){
$('.slider').slider();
});
</script>
</body>
</html>
এখানে:
- slider: স্লাইডারের মূল ক্লাস।
- slides: স্লাইডের ভিতরের সমস্ত উপাদান (ছবি, টেক্সট ইত্যাদি) রাখা হয়।
- caption: এটি স্লাইডের কন্টেন্টের জন্য ব্যবহৃত হয়, যেমন হেডলাইন বা টেক্সট।
Auto-play Slider
Auto-play স্লাইডার এমন একটি স্লাইডার, যা স্বয়ংক্রিয়ভাবে একের পর এক স্লাইড পরিবর্তন করে। Materialize CSS এ auto-play সক্রিয় করা খুবই সহজ। স্লাইডারের জন্য auto ফিচারটি ডিফল্টভাবে সক্রিয় থাকে, তবে আপনি চাইলে duration এবং indicators কাস্টমাইজ করতে পারেন।
Auto-play স্লাইডার উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto-play Slider</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Slider Structure -->
<div class="slider">
<ul class="slides">
<li>
<img src="https://via.placeholder.com/800x400?text=Auto+Play+1">
<div class="caption center-align">
<h3>Slide 1 - Auto Play</h3>
<h5 class="light grey-text text-lighten-3">This slide will auto change.</h5>
</div>
</li>
<li>
<img src="https://via.placeholder.com/800x400?text=Auto+Play+2">
<div class="caption left-align">
<h3>Slide 2 - Auto Play</h3>
<h5 class="light grey-text text-lighten-3">This slide will also auto change.</h5>
</div>
</li>
</ul>
</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>
<!-- Initialize Auto-play Slider -->
<script>
$(document).ready(function(){
$('.slider').slider({
full_width: true, // Full-width slider
indicators: true, // Show navigation indicators
height: 400, // Set height of the slider
transition: 500, // Set the transition speed
interval: 3000 // Time between each slide change (in ms)
});
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- interval: স্লাইড পরিবর্তনের জন্য সময় (মিলিসেকেন্ডে)। এখানে,
3000মানে প্রতি ৩ সেকেন্ডে স্লাইড পরিবর্তিত হবে। - transition: স্লাইডের অ্যানিমেশন ট্রানজিশন টাইম (মিলিসেকেন্ডে)।
- full_width: এটি স্লাইডারকে পুরো স্ক্রীন প্রস্থে প্রসারিত করবে।
- indicators: এটি স্লাইডার নেভিগেশন ইনডিকেটর দেখাবে, যা ইউজারকে স্লাইড পরিবর্তন করার সুযোগ দেয়।
Custom Slider Animation
আপনি যদি স্লাইডারটির অ্যানিমেশন কাস্টমাইজ করতে চান, তবে Materialize CSS-এ স্লাইডের ট্রানজিশন ইফেক্ট পরিবর্তন করা সম্ভব। আপনি ট্রানজিশন টাইম, অ্যানিমেশন ইফেক্ট এবং এর গতির জন্য কাস্টম CSS বা জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।
Custom Animation উদাহরণ:
<style>
.slider {
animation: customSlide 5s ease-in-out infinite;
}
@keyframes customSlide {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
</style>
এখানে:
- @keyframes customSlide: একটি কাস্টম অ্যানিমেশন তৈরি করেছে, যা স্লাইডারের opacity নিয়ন্ত্রণ করে এবং স্লাইডের দৃশ্যমানতা কাস্টমাইজ করে।
উপসংহার
Materialize CSS এর Slider একটি শক্তিশালী উপাদান যা ওয়েবসাইটে ইমেজ, টেক্সট বা কনটেন্ট প্রদর্শন করতে সহায়তা করে। আপনি সহজেই auto-play স্লাইডার তৈরি করতে পারেন এবং এর duration, transition, এবং interval কাস্টমাইজ করতে পারবেন। এছাড়া, custom slider animation ব্যবহার করে আপনি স্লাইডারকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে পারেন। Materialize CSS এর স্লাইডার কম্পোনেন্টের মাধ্যমে আপনি সহজেই সুন্দর এবং কার্যকরী স্লাইডার তৈরি করতে পারবেন।
Read more
