বুটস্ট্রাপ ৫ এর কারousel (Carousel) একটি ইন্টারেক্টিভ স্লাইডিং কম্পোনেন্ট যা ব্যবহারকারীদের বিভিন্ন কন্টেন্ট (যেমন, ছবি, টেক্সট, বা অন্যান্য উপাদান) স্লাইড আকারে দেখানোর সুযোগ দেয়। এর মধ্যে মাল্টিপল স্লাইডস এবং স্লাইড ইনডিকেটরস যোগ করার মাধ্যমে, আপনি একটি ডাইনামিক স্লাইডিং অভিজ্ঞতা তৈরি করতে পারেন, যেখানে ব্যবহারকারী স্লাইডগুলির মধ্যে নেভিগেট করতে পারবেন এবং স্লাইড ইনডিকেটরসের মাধ্যমে কোন স্লাইডে আছেন তা জানতে পারবেন।
মাল্টিপল স্লাইডস তৈরি করা
বুটস্ট্রাপ ৫ এর Carousel কম্পোনেন্টটি মাল্টিপল স্লাইডস এবং স্লাইড নেভিগেশনের জন্য প্রস্তুত। এর মাধ্যমে আপনি একাধিক স্লাইডের মধ্যে অটোমেটিক বা ম্যানুয়াল স্লাইডিং অ্যাকশন তৈরি করতে পারেন। এখানে প্রতিটি স্লাইডের জন্য একটি carousel-item ব্যবহার করা হয়।
উদাহরণ: মাল্টিপল স্লাইডস এবং স্লাইড ইনডিকেটরস
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Slides and Indicators</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<!-- স্লাইড ইনডিকেটরস -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<!-- স্লাইড কন্টেন্ট -->
<div class="carousel-inner">
<!-- প্রথম স্লাইড -->
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400?text=Slide+1" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>Slide 1</h5>
<p>এটি প্রথম স্লাইডের কন্টেন্ট।</p>
</div>
</div>
<!-- দ্বিতীয় স্লাইড -->
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400?text=Slide+2" class="d-block w-100" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Slide 2</h5>
<p>এটি দ্বিতীয় স্লাইডের কন্টেন্ট।</p>
</div>
</div>
<!-- তৃতীয় স্লাইড -->
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400?text=Slide+3" class="d-block w-100" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>Slide 3</h5>
<p>এটি তৃতীয় স্লাইডের কন্টেন্ট।</p>
</div>
</div>
</div>
<!-- পূর্ববর্তী এবং পরবর্তী বাটন -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- Carousel Indicators:
carousel-indicators: এই সেকশনে স্লাইড ইনডিকেটরগুলো অন্তর্ভুক্ত থাকে। প্রতিটি ইনডিকেটর একটি বাটনের মতো কাজ করে যা নির্দিষ্ট স্লাইডে নেভিগেট করতে সাহায্য করে।data-bs-slide-to: এই অ্যাট্রিবিউটটি নির্দিষ্ট স্লাইডে যাওয়ার জন্য ব্যবহৃত হয়। যেমন,data-bs-slide-to="0"প্রথম স্লাইডে নেবে,data-bs-slide-to="1"দ্বিতীয় স্লাইডে, এবং ইত্যাদি।
- Carousel Inner (স্লাইড কন্টেন্ট):
carousel-inner: এটি সমস্ত স্লাইড ধারণ করে। এখানে প্রতিটি স্লাইডের জন্য একটিcarousel-itemব্যবহার করা হয়। প্রথম স্লাইডের জন্যactiveক্লাসটি ব্যবহার করা হয় যাতে এটি প্রথমে প্রদর্শিত হয়।- প্রতিটি স্লাইডে একটি
carousel-captionথাকতে পারে যা স্লাইডের টেক্সট বা অন্যান্য কন্টেন্ট ধারণ করতে পারে।
- Previous and Next Buttons:
carousel-control-prevএবংcarousel-control-next: এগুলি ব্যবহারকারীকে স্লাইডের মধ্যে নেভিগেট করতে সাহায্য করে। পূর্ববর্তী স্লাইডে যাওয়ার জন্য পূর্ববর্তী বাটন এবং পরবর্তী স্লাইডে যাওয়ার জন্য পরবর্তী বাটন ব্যবহার করা হয়।
কাস্টমাইজেশন
- অটো স্লাইডিং: যদি আপনি চান স্লাইডগুলো অটোমেটিকভাবে চলুক, তাহলে
data-bs-ride="carousel"অ্যাট্রিবিউটটি যুক্ত করুন। - স্লাইড টাইমিং: আপনি স্লাইডিং সময়কাল পরিবর্তন করতে চাইলে, স্লাইডারটি কাস্টমাইজ করতে পারেন জাভাস্ক্রিপ্ট ব্যবহার করে। উদাহরণস্বরূপ, স্লাইডের সময়কাল পরিবর্তন করার জন্য বুটস্ট্রাপের JavaScript API ব্যবহার করতে পারেন।
var myCarousel = document.querySelector('#carouselExampleIndicators')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000, // স্লাইড পরিবর্তনের সময়কাল (মিলিসেকেন্ডে)
ride: 'carousel'
})
এটি ছিল মাল্টিপল স্লাইডস এবং স্লাইড ইনডিকেটরস ব্যবস্থাপনা করার একটি সহজ উদাহরণ। আপনি এই কনসেপ্টটি আরও কাস্টমাইজ করে আপনার ওয়েবসাইটে ব্যবহারের জন্য আরও উন্নত ফিচার যোগ করতে পারেন।
Content added By
Read more
