বুটস্ট্রাপ জেএস ক্যারোসেল রেফারেন্স | bootstrap JS Carousel Reference

বুটস্ট্রাপ জেএস ক্যারোসেল (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`	এই ইভেন্টটি যখন ক্যারোসেল একটি আইটেম থেকে অন্য আরেকটি আইটেমে স্লাইড করা শেষ করে তখন ঘটে।	উদাহরণ দেখুন

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

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

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

JS কম্পোনেন্ট

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

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

বুটস্ট্রাপ জেএস ক্যারোসেল রেফারেন্স | bootstrap JS Carousel Reference

বুটস্ট্রাপ জেএস ক্যারোসেল (carousel.js)

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

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

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

ফলাফল

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

ফলাফল

বুটস্ট্রাপ ক্যারোসেল মেথড

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

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

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

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

JS কম্পোনেন্ট

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

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

বুটস্ট্রাপ জেএস ক্যারোসেল রেফারেন্স | bootstrap JS Carousel Reference

বুটস্ট্রাপ জেএস ক্যারোসেল (carousel.js)

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

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

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

ফলাফল

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

ফলাফল

বুটস্ট্রাপ ক্যারোসেল মেথড

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

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

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