MooTools ব্যবহার করে Image Sliders এবং Carousels তৈরি করা একটি আকর্ষণীয় উপায় ওয়েব পেজের ইন্টারফেস উন্নত করার জন্য। এই ধরনের ইন্টারঅ্যাকটিভ এলিমেন্ট ওয়েব পেজে ব্যবহারকারীর অভিজ্ঞতা (UX) উন্নত করতে সাহায্য করে, বিশেষ করে যখন অনেক ছবি বা কনটেন্ট একসাথে প্রদর্শন করতে হয়।
MooTools এর Fx ক্লাস এবং Element ক্লাস ব্যবহার করে আপনি খুব সহজেই একটি Image Slider বা Carousel তৈরি করতে পারেন। এখানে, আমি দুটি উদাহরণ দেখাবো - একটি সাধারণ Image Slider এবং একটি Carousel যা কাস্টম ইফেক্ট ব্যবহার করে কাজ করবে।
১. Image Slider তৈরি করা
এখানে একটি সাধারন Image Slider তৈরি করা হয়েছে, যা ব্যবহারকারীর ক্লিকের মাধ্যমে স্লাইড করবে।
HTML কোড:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Image Slider</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<style>
#slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slider-images {
display: flex;
transition: transform 1s ease;
}
.slider-images img {
width: 500px;
height: 300px;
}
#prev, #next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
cursor: pointer;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
</style>
</head>
<body>
<div id="slider">
<div class="slider-images">
<img src="https://via.placeholder.com/500x300/ff7f7f/333333" alt="Image 1">
<img src="https://via.placeholder.com/500x300/7fffd4/333333" alt="Image 2">
<img src="https://via.placeholder.com/500x300/ffcc00/333333" alt="Image 3">
</div>
<div id="prev">❮</div>
<div id="next">❯</div>
</div>
<script type="text/javascript">
window.addEvent('domready', function() {
var currentIndex = 0;
var images = $('slider').getElements('.slider-images img');
var totalImages = images.length;
var slider = $('slider').getElement('.slider-images');
// Next button functionality
$('next').addEvent('click', function() {
currentIndex = (currentIndex + 1) % totalImages;
slider.setStyle('transform', 'translateX(' + (-currentIndex * 500) + 'px)');
});
// Prev button functionality
$('prev').addEvent('click', function() {
currentIndex = (currentIndex - 1 + totalImages) % totalImages;
slider.setStyle('transform', 'translateX(' + (-currentIndex * 500) + 'px)');
});
});
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- HTML: এখানে একটি ডিভ
#sliderতৈরি করা হয়েছে যেখানে তিনটি ছবি রাখা হয়েছে। দুটি নেভিগেশন বাটন (Previous এবং Next) দেওয়া হয়েছে। - CSS: স্লাইডার এবং ইমেজের সাইজ নির্ধারণ করা হয়েছে এবং ছবিগুলিকে এক লাইনে সাজানো হয়েছে।
transitionপ্রোপার্টি ব্যবহার করে স্লাইডিং ইফেক্ট দেওয়া হয়েছে। - JavaScript: MooTools ব্যবহার করে
prevএবংnextবাটনে ক্লিক করলে ইমেজের স্লাইডিং কাজ করবে।transformCSS প্রপার্টি ব্যবহার করে ইমেজগুলি স্লাইড করা হচ্ছে।
২. Image Carousel তৈরি করা
এখানে একটি Image Carousel তৈরি করা হয়েছে, যা অটো রোটেট হবে এবং ব্যবহারকারী স্লাইড শো থামাতে পারবেন।
HTML কোড:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Image Carousel</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<style>
#carousel {
width: 600px;
height: 350px;
overflow: hidden;
position: relative;
}
.carousel-images {
display: flex;
transition: transform 1s ease-in-out;
}
.carousel-images img {
width: 600px;
height: 350px;
}
#playPause {
position: absolute;
bottom: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="carousel">
<div class="carousel-images">
<img src="https://via.placeholder.com/600x350/ff7f7f/333333" alt="Image 1">
<img src="https://via.placeholder.com/600x350/7fffd4/333333" alt="Image 2">
<img src="https://via.placeholder.com/600x350/ffcc00/333333" alt="Image 3">
</div>
<div id="playPause">Pause</div>
</div>
<script type="text/javascript">
window.addEvent('domready', function() {
var currentIndex = 0;
var images = $('carousel').getElements('.carousel-images img');
var totalImages = images.length;
var carousel = $('carousel').getElement('.carousel-images');
var interval;
var isPlaying = true;
// Carousel play/pause functionality
var playPauseButton = $('playPause');
playPauseButton.addEvent('click', function() {
if (isPlaying) {
clearInterval(interval);
playPauseButton.set('html', 'Play');
} else {
startCarousel();
playPauseButton.set('html', 'Pause');
}
isPlaying = !isPlaying;
});
// Start the carousel (auto slide)
function startCarousel() {
interval = setInterval(function() {
currentIndex = (currentIndex + 1) % totalImages;
carousel.setStyle('transform', 'translateX(' + (-currentIndex * 600) + 'px)');
}, 2000); // Slide every 2 seconds
}
// Start the carousel initially
startCarousel();
});
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- HTML: এখানে একটি
#carouselএলিমেন্ট তৈরি করা হয়েছে, যা তিনটি ছবির ক্যারোসেল প্রদর্শন করবে। একটি প্লে/পজ বাটনও রয়েছে যা স্লাইডার থামাতে এবং চালু করতে ব্যবহৃত হবে। - CSS: ক্যারোসেল স্লাইডিংয়ের জন্য ছবির সাইজ এবং
transitionসেট করা হয়েছে। - JavaScript: MooTools ব্যবহার করে অটো রোটেটিং ক্যারোসেল তৈরি করা হয়েছে।
setInterval()ফাংশনের মাধ্যমে প্রতি ২ সেকেন্ড পর পর স্লাইড পরিবর্তন হবে।playPauseবাটনটি ব্যবহারকারীর ক্লিক অনুযায়ী ক্যারোসেল চালু বা বন্ধ করবে।
সারাংশ
MooTools দিয়ে Image Sliders এবং Carousels তৈরি করা অত্যন্ত সহজ এবং কার্যকরী। আপনি MooTools এর Fx ক্লাস এবং Element মেথড ব্যবহার করে সহজেই সুন্দর স্লাইডিং ইফেক্ট তৈরি করতে পারেন। আপনি স্লাইড এবং ক্যারোসেল তৈরির জন্য প্লাগইন ও কাস্টম কোড ব্যবহার করে ইন্টারঅ্যাকটিভ ওয়েব পেজের ফিচার বাড়াতে পারেন।
Content added By
Read more
