বুটস্ট্রাপ ক্যারোসেল - Bootstrap Carousel
বুটস্ট্রাপ ক্যারোসেল প্লাগ-ইন
বুটস্ট্রাপ ক্যারোসেল প্লাগ-ইন হলো এলিমেন্টের মধ্যে চক্রাকারে ঘুরার জন্য একটি কম্পোনেন্ট(component), যেমনঃ একটি ক্যারোসেল (স্লাইডসো)।
টিপসঃ বুটস্ট্রাপ ক্যারোসেল প্লাগ-ইন ব্যবহারের জন্য আপনি চাইলে বুটস্ট্রাপের আলাদা "carousel.js" ফাইল ব্যবহার করতে পারেন, অথবা বুটস্ট্রাপের সম্পূর্ণ js ফাইল "bootstrap.js" বা "bootstrap.min.js" ফাইলও ব্যবহার করতে পারেন। বুটস্ট্রাপের সম্পূর্ণ js ফাইলের মধ্যে বুটস্ট্রাপের সবগুলো কম্পোনেন্ট একত্রে থাকে। ক্যারোসেল কম্পোনেন্ট ব্যবহার করার জন্য উপরের যেকোন একটি ফাইল ওয়েবপেজে অন্তর্ভুক্ত করলেই চলবে।
নোট: ক্যারোসেল ইন্টারনেট এক্সপ্লোরার(IE) 9 এবং পূর্ববর্তী ভার্সনে ভালভাবে সাপোর্ট করে না (কারন ইন্টারনেট এক্সপ্লোরার স্লাইড ইফেক্ট সাপোর্ট করানোর জন্য সিএসএস(৩) ট্রানজিশন এবং এ্যানিমেশন ব্যবহার করে)।
কিভেবে একটি ক্যারোসেল তৈরি করবেন
কিভাবে একটি বেসিক ক্যারোসেল তৈরি করা যায় তা নিচের উদাহরণে দেখানো হলো:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Carousel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 80%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div id="carouselId" class="carousel slide" data-ride="carousel">
<!-- ইন্ডিকেটরস -->
<ol class="carousel-indicators">
<li data-target="#carouselId" data-slide-to="0" class="active"></li>
<li data-target="#carouselId" data-slide-to="1"></li>
<li data-target="#carouselId" data-slide-to="2"></li>
<li data-target="#carouselId" data-slide-to="3"></li>
</ol>
<!-- স্লাইড পার্ট -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="nilgiri.jpg" alt="Nilgiri" width="460" height="345">
</div>
<div class="item">
<img src="paris.jpg" alt="Paris Tower" width="460" height="345">
</div>
<div class="item">
<img src="triangle.jpg" alt="Triangle" width="460" height="345">
</div>
<div class="item">
<img src="doha.jpg" alt="Doha Qatar" width="460" height="345">
</div>
</div>
<!-- আগে পরে যাওয়ার জন্য কন্ট্রোলার তৈরি -->
<a class="left carousel-control" href="#carouselId" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselId" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
ফলাফল
উদাহরণের ব্যাখ্যা
আউটারমোস্ট <div>:
ফাংশনের মাধ্যমে ক্যারোসেলকে নিয়ন্ত্রন করার জন্য ক্যারোসেলে একটি আইডি ব্যবহার করা হয় (এক্ষেত্রে ব্যবহার করা হয়েছে id="carouselId")।
class="carousel"
দ্বারা বুঝানো হয়েছে যে এই <div> টি একটি ক্যারোসেল বহন করছে।
.slide ক্লাসের মাধ্যমে সিএসএস এর ট্রানজিশন এবং এ্যানিমেশন ইফেক্ট যুক্ত করা হয়েছে। নতুন আইটেমটিকে দেখানোর সময় এটিকে স্লাইড আকারে প্রদর্শন করে।
যদি আপনার এই ইফেক্টটির প্রয়োজন না হয়, তবে আপনি চাইলে এই ক্লাসটি বাদ দিতে পারেন।
data-ride="carousel"
এট্রিবিউটটি বুটস্ট্রাপকে পেজ লোড হওয়ার সাথে সাথে এ্যানিমেশন শুরু করার নির্দেশনা প্রদান করে।
"Indicators" পার্ট:
ইন্ডিকেটর হলো প্রত্যেকটি স্লাইডের নিচের ছোট গোল বৃত্ত (যার দ্বারা বুঝানো হয় যে, ক্যারোসেলে কতোগুলো স্লাইড রয়েছে এবং ইউজার বর্তমানে কোন স্লাইডটি দেখছে)।
ইন্ডিকেটরগুলো একটি অর্ডার লিস্টে নির্দিষ্ট করে দেওয়া হয়, যাতে .carousel-indicators ক্লাস ব্যবহার করা হয়।
data-target এট্রিবিউটের মাধ্যমে ক্যারোসেলের আইডিকে লক্ষ্য করা হয়।
যখন ইউজার নির্দিষ্ট ডটে ক্লিক করে তখন কোন স্লাইডে যাবে তা নির্দিষ্ট করার জন্য data-slide-to এট্রিবিউট ব্যবহার করা হয়।
"Wrapper for slides" পার্ট:
স্লাইডগুলো .carousel-inner ক্লাস যুক্ত <div> এলিমেন্টের মধ্যে রাখতে হবে।
প্রত্যেকটি স্লাইডের কন্টেন্টগুলো .item ক্লাস যুক্ত <div> এলিমেন্টের মধ্যে রাখতে হবে। কন্টেন্ট টেক্সট হতে পারে আবার ইমেজও হতে পারে।
যেকোন একটি স্লাইডে অবশ্যই .active ক্লাস যুক্ত করতে হবে। অন্যথায় ক্যারোসেলটি দৃশ্যমান হবে না।
"Left এবং right কন্ট্রোল" পার্ট:
এই কোডগুলোর মাধ্যমে "পূর্ববর্তী" এবং "পরবর্তী" বুঝায়, যার মাধ্যমে একজন ইউজার ইচ্ছে করলে পূর্বের এবং পরের স্লাইডগুলো ম্যানুয়েললি দেখতে পারে।
data-slide এট্রিবিউট "prev" অথবা "next" কী-ওয়ার্ড গ্রহন করে, যেটি স্লাইডকে রিলেটিভ অবস্থান থেকে বর্তমান অবস্থানে পরিবর্তন করে।
স্লাইডে ক্যাপশন যুক্ত করা
প্রতিটি স্লাইডে ক্যাপশন তৈরি করার জন্য প্রত্যেকটি <div
class="item"> এর মধ্যে <div class="carousel-caption"> যুক্ত করুনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Carousel Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 80%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div id="carouselId" class="carousel slide" data-ride="carousel">
<!-- ইন্ডিকেটরস -->
<ol class="carousel-indicators">
<li data-target="#carouselId" data-slide-to="0" class="active"></li>
<li data-target="#carouselId" data-slide-to="1"></li>
<li data-target="#carouselId" data-slide-to="2"></li>
<li data-target="#carouselId" data-slide-to="3"></li>
</ol>
<!-- স্লাইড পার্ট -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="nilgiri.jpg" alt="Nilgiri" width="460" height="345">
<div class="carousel-caption">
<h3>নিলগিরি</h3>
<p>নিলগিরি বাংলাদেশের বান্ধরবন জেলায় অবস্থিত।</p>
</div>
</div>
<div class="item">
<img src="paris.jpg" alt="Paris Tower" width="460" height="345">
<div class="carousel-caption">
<h3>আইফেল টাওয়ার</h3>
<p>আইফেল টাওয়ার প্যারিস শহরে অবস্থিত।</p>
</div>
</div>
<div class="item">
<img src="triangle.jpg" alt="Triangle" width="460" height="345">
<div class="carousel-caption">
<h3>তিনকোনিক স্থাপনা</h3>
<p>ফ্রান্সের একটি অনন্য স্থাপনা!</p>
</div>
</div>
<div class="item">
<img src="doha.jpg" alt="Doha Qatar" width="460" height="345">
<div class="carousel-caption">
<h3>দোহা</h3>
<p>দোহা কাতারের রাজধানী।</p>
</div>
</div>
</div>
<!-- আগে পরে যাওয়ার জন্য কন্ট্রোলার তৈরি -->
<a class="left carousel-control" href="#carouselId" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselId" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ ক্যারোসেলের সম্পূর্ণ রেফারন্স
বুটস্ট্রাপ ক্যারেসেলের অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS ক্যারেসেল রেফারেন্স পেজে ভিজিট করুন।