বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

বুটস্ট্রাপ টিউটোরিয়াল

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

বুটস্ট্রাপ গ্রীড সিস্টেম

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ JS ক্যারোসেল


JS ক্যারোসেল (carousel.js)

ক্যারোসেল প্লাগ-ইন হলো এলিমেন্টের মধ্যে চক্রাকারে ঘুরার জন্য একটি কম্পোনেন্ট(component), যেমনঃ একটি ক্যারোসেল (স্লাইডসো)।

ক্যারোসেলের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ ক্যারোসেল টিউটোরিয়ালটি পড়ুন।

নোট: Internet Explorer 9 এবং এর পূর্বের ভার্সনে ক্যারোসেল যথাযথ ভাবে সাপোর্ট করে না। (কারন স্লাইড ইফেক্ট পাওয়ার জন্য তারা সিএসএস(৩) ট্রানজিশন এবং এনিমেশন ব্যবহার করে)


ক্যারোসেল প্লাগ-ইন ক্লাস

Class Description
.carousel ক্যারোসেল তৈরী করে।
.slide একটি আইটেম থেকে অন্য আইটেম এ স্লাইড করার সময় সিএসএস ট্রানজিশন এবং এনিমেশন যুক্ত করে। আপনি যদি এই ইফেক্ট না চান তাহলে এই ক্লাসটি বাদ দিয়ে দিন।
.carousel-indicators ক্যারোসেলের জন্য একটি ইন্ডিকেটর যুক্ত করে। এগুলো হলো প্রতিটি স্লাইডের নিচে ছোট ছোট ডট(যেগুলো দ্বারা বুঝায়, ক্যারোসেলে কতগুলো স্লাইড আছে, এবং বর্তমানে ইউজার কোন স্লাইডটি দেখছেন)।
.carousel-inner ক্যারোসেলে স্লাইড যুক্ত করে।
.item প্রতিটি স্লাইডের কন্টেন্টকে বুঝায়।
.left carousel-control ক্যারোসেলে একটি পূর্ববর্তী/Previous বাটন যুক্ত করে, যেটি ইউজারকে পিছনে যাওয়ার সুযোগ দেয়।
.right carousel-control ক্যারোসেলে একটি পরবর্তী/Next বাটন যুক্ত করে, যেটি ইউজারকে সামনে যাওয়ার সুযোগ দেয়।
.carousel-caption ক্যারেসেলের জন্য ক্যাপশন তৈরি করে।

data-* এট্রিবিউট মাধ্যম

data-ride="carousel" এট্রিবিউট ক্যারোসেলকে একটিভ করে।

data-slide এবং data-slide-to এট্রিবিউটের মাধ্যমে একটি স্লাইড পরিবর্তিত হয়ে কোন স্লাইডে যাবে তা নির্দিষ্ট করে।

data-slide এট্রিবিউটে দুইটি ভ্যালু ব্যবহার করা যায়ঃ prev অথবা next, যেখানে data-slide-to তে নাম্বার ব্যবহার ব্যবহৃত হয়।

উদাহরণ

<!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>

ফলাফল




জাভাস্ক্রিপ্ট মাধ্যম

ম্যানুয়েললি যুক্ত করার জন্যঃ

উদাহরণ

<!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">
            <!-- ইন্ডিকেটরস -->
            <ol class="carousel-indicators">
            <li class="item1 active"></li>
            <li class="item2"></li>
            <li class="item3"></li>
            <li class="item4"></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>
      <script>
      $(document).ready(function(){
          // Activate Carousel
          $("#carouselId").carousel();
          
          // Enable Carousel Indicators
          $(".item1").click(function(){
              $("#carouselId").carousel(0);
          });
          $(".item2").click(function(){
              $("#carouselId").carousel(1);
          });
          $(".item3").click(function(){
              $("#carouselId").carousel(2);
          });
          $(".item4").click(function(){
              $("#carouselId").carousel(3);
          });
          
          // Enable Carousel Controls
          $(".left").click(function(){
              $("#carouselId").carousel("prev");
          });
          $(".right").click(function(){
              $("#carouselId").carousel("next");
          });
      });
      </script>

   </body>
</html>

ফলাফল




ক্যারোসেল অপশন

অপশন data এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে পাস(pass) করতে পারে। data এট্রিবিউটের ক্ষেত্রে, অপশনের নাম "data-" সাথে যুক্ত করুন। যেমন; data-interval=""

নাম ধরন ডিফল্ট বিবরণ
interval number, or the boolean false 5000 একটি স্লাইড থেকে অন্য আরেকটি স্লাইডে যেতে কতো সময়(মিলিসেকেন্ডে) নিবে তা নির্দিষ্ট করে।

নোটঃ স্বয়ংক্রিয় স্লাইডিং বন্ধ করার জন্য ইন্টারবাল false নির্ধারণ করুন।
pause string, or the boolean false "hover" যখন মাউস কার্সর স্লাইডে নেয়া হয় তখন ক্যারোসেলকে এক স্লাইড থেকে অন্য স্লাইডে যেতে বিরতি দেয়। আবার যখন মাউস কার্সর সরিয়ে নেয়া হয় তখন আবার ক্যারোসেল চালু হয়।

নোটঃ হোভারের ক্ষেত্রে ক্ষমতা অক্ষম করে রাখতে চাইলে false নির্ধারন করুন।
wrap boolean true ক্যারোসেল কি বিরামহীনভাবে চলতেই থাকবে নাকি একবার চলার পর শেষ স্লাইডে বন্ধ হয়ে যাবে তা নির্দিষ্ট করে।

  • true - বিরামহীনভাবে চলতে থাকবে
  • false - একবার চলার পর শেষ স্লাইডে থেমে যাবে

উদাহরণঃ জাভাস্ক্রিপ্ট ব্যবহার করে ক্যারোসেলের সবগুলো অপশনের ব্যবহার

<!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">
            <!-- ইন্ডিকেটরস -->
            <ol class="carousel-indicators">
            <li class="item1 active"></li>
            <li class="item2"></li>
            <li class="item3"></li>
            <li class="item4"></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">
            <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">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
          </div>
      </div>
      <script>
      $(document).ready(function(){
          // Activate Carousel
          $("#carouselId").carousel({interval: 500, wrap: false, pause: "hover"});
          
          // Enable Carousel Indicators
          $(".item1").click(function(){
              $("#carouselId").carousel(0);
          });
          $(".item2").click(function(){
              $("#carouselId").carousel(1);
          });
          $(".item3").click(function(){
              $("#carouselId").carousel(2);
          });
          $(".item4").click(function(){
              $("#carouselId").carousel(3);
          });
          
          // Enable Carousel Controls
          $(".left").click(function(){
              $("#carouselId").carousel("prev");
          });
          $(".right").click(function(){
              $("#carouselId").carousel("next");
          });
      });
      </script>

   </body>
</html>

ফলাফল




উদাহরণঃ data-* এট্রিবিউট ব্যবহার করে ক্যারোসেলের সবগুলো অপশনের ব্যবহার

<!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" data-interval="500" data-pause="hover" data-wrap="false">
            <!-- ইন্ডিকেটরস -->
            <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>

ফলাফল




ক্যারোসেল মেথড

নিচের টেবিলে ক্যারোসেল মেথডগুলো দেয়া হলো।

মেথড বিবরণ
.carousel(options) একটি অপশন সহ ক্যারোসেল সচল করে। ভ্যালিড ভ্যালু জানার জন্য উপরে ক্যারোসেল অপশন দেখুন।
.carousel("cycle") ক্যারোসেলের আইটেমগুলো বাম থেকে ডানের দিকে যায়।
.carousel("pause") ক্যারোসেলকে বন্ধ করে দেয়।
.carousel(number) একটি বিশেষ বিষয়ের দিকে যায়(zero-based; প্রথম আইটেম হলো 0, দ্বিতীয় আইটেম হলো 1 ইত্যাদি..)
.carousel("prev") পূর্ববর্তী আইটেমের দিকে নিয়ে যায়।
.carousel("next") পরবর্তী আইটেমের দিকে নিয়ে যায়।

নোটঃ মেথডগুলো সবগুলো নিয়ে জাভাস্ক্রিপ্ট অপশন উদাহরণ দেওয়া হয়েছে


ক্যারোসেল ইভেন্ট

নিচে টেবিলে ক্যারোসেল ইভেন্টগুলো দেয়া হলো।

ইভেন্ট বিবরণ উদাহরণ
slide.bs.carousel এই ইভেন্টটি যখন ক্যারোসেল একটি আইটেম থেকে অন্য আরেকটি আইটেমে স্লাইড করা শুরু করে তখন ঘটে। উদাহরণ দেখুন
slid.bs.carousel এই ইভেন্টটি যখন ক্যারোসেল একটি আইটেম থেকে অন্য আরেকটি আইটেমে স্লাইড করা শেষ করে তখন ঘটে। উদাহরণ দেখুন