বুটস্ট্রাপ ক্যারোজেল প্লাগিন (Bootstrap Carousel Plugin)

বুটস্ট্রাপ কারুসেল প্লাগিন

Carousel প্লাগইন হচ্ছে এলিমেন্ট দ্বারা আবর্ত করার জন্য একটি ক্যারোজেল (স্লাইডশো) এর মত একটি উপাদান।

টিপস : প্লাগইন স্বতন্ত্রভাবে অন্তর্ভুক্ত করা যেতে পারে (বুটস্ট্র্যাপ এর স্বতন্ত্র "carousel.js" ফাইল ব্যবহার করে), অথবা সব একযোগে ("bootstrap.js" বা "bootstrap.min.js" ব্যবহার করে)

এর উদাহরণ

নোট : ক্যারোজেল ইন্টারটেন এক্সপ্লোরার ৯ এবং এর আগের ভার্সনগুলোতে সাপর্ট করে না (কারণ তারা স্লাইড ইফেক্ট CSS 3 ট্রানজিশন এবং অ্যানিমেশন ব্যবহার করে)।

 

কিভাবে একটি ক্যারোজেল তৈরি করা যায়

নিজের উদাহরণে একটি সাধারণ ক্যারোজেল তৈরি করার পদ্ধতি দেখানো হল:

উদাহরণ : ০১


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ফলাফল : কিভাবে কেরোজেল তৈরি করবেন

 

উদাহরণের ব্যাখ্যা

<div> অংশ:

প্রথমে id="myCarousel" নামে একটা আইডি নিতে হবে যাতে ক্যারোজেল এর কন্ট্রোলগুলো সিঠিকভাবে কাজ করতে পারে।

class="carousel" নির্দেশ করে যে <div> এর ভিতরে একটি ক্যারোজেল আছে।

.slide ক্লাসটি সিএসএস ট্রানজিশন এবং অ্যানিমেশন ইফেক্ট যোগ করে, যা যখন নতুন আইটেম প্রদর্শিত হয় তখন আগের আইটেমটিকে স্লাইড করে। আপনি যদি এটি না চান তাহলে এটিকে মুছে দিতে পারেন।

data-ride="carousel" এট্রিবিউটটি পেজ লোড হওয়ার সময় বুটস্ট্রাপকে নির্দেম দেয় ক্যারোজেল এনিমেশন শুরু করার জন্য।

 

"Indicators" (নির্দেশক) অংশ

"Indicators" হচ্ছে প্রতিটি স্লাইডের নিজের দিকে ছোট একটি বিন্দু (যা নির্দেশ ক্যারোজেল এর মধ্যে কতটি স্লাইড রয়েছে এবং ব্যবহারকারী বর্তমানে কোন স্লাইডটি দেখছে)।

.carousel-indicators ক্লাস এর সাথে ক্রম তালিকায় নির্দেশক উল্লেক করা হয়।

data-target এট্রিবিউট ক্যারোজেল এর আইডিকে পয়েন্ট করে।

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

 

"Wrapper for slides" স্লাইড এর জন্য আবরণ অংশ:

<div> এর মধ্যে .carousel-inner ক্লাস দ্বারা স্লাইড নির্দিষ্ট করা হয়।

.item ক্লাস দ্বারা <div> এর মধ্যের উপাদানগুলোকে সঙ্গায়িত করা হয়।

একটি স্লাইড এর মধ্যে .active ক্লাস যোগ করতে হয়। এছাড়া ক্যারোজেলটি দৃশ্যমান হয় না।

 

"Left and right controls" ডান বাম নিয়ন্ত্রণ অংশ:

কোডটি ডান এবং বাম বাটন যোগ করে যা দ্বারা ব্যবহারকারী নিজের ইচ্ছা মতো ডান অথবা বাম স্লাইডে যেতে পারে।

data-slide এট্রিবিউটটি prev" এবং "next" কীওয়ার্ডকে গ্রহণ করে। যা বর্তমান অবস্থানের পরিপ্রেক্ষিকে স্লাইড এর আপেক্ষিক অবস্থান পরিবর্তন করে।

 

 

 

স্লাইড এ ক্যাপশন যোগ করা

প্রতিটি স্লাইডের জন্য ক্যাপসন তৈরি করার জন্য প্রতিটি <div class="item">  এর ভিতরে <div class="carousel-caption"> যোগ করুন।

উদাহরণ ০২:


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ফলাফল : স্লাইড এ ক্যাপশন যোগ করা

 

 

Permanent link to this article: http://bangla.sitestree.com/%e0%a6%ac%e0%a7%81%e0%a6%9f%e0%a6%b8%e0%a7%8d%e0%a6%9f%e0%a7%8d%e0%a6%b0%e0%a6%be%e0%a6%aa-%e0%a6%95%e0%a6%be%e0%a6%b0%e0%a7%81%e0%a6%b8%e0%a7%87%e0%a6%b2-%e0%a6%aa%e0%a7%8d%e0%a6%b2%e0%a6%be%e0%a6%97/