Tag Archives: স্লাইড

jQuery-001 । জে কুয়েরি - ০০১

jQuery ইফেক্টস – স্লাইড ইফেক্ট। jQuery Effects – Sliding

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

আলামিন মনির

 

JQuery দিয়ে আপনি বিভিন্ন উপাদানের একটি স্লাইডার প্রভাব তৈরি করতে পারেন.

jQuery এর নিম্নলিখিত স্লাইড পদ্ধতি আছে:

jQuery slideDown()

JQuery এর slideDown () মেথড প্রদর্শন করে।

jQuery slideUp()

JQuery এর slideUp () মেথড প্রদর্শন করে।

jQuery slideToggle()

JQuery এর SlideToggle () মেথড প্রদর্শন করে।

তিনটি পদ্ধতি ধাপে ধাপে নিম্নে আলোচনা করা হলঃ

 

jQuery এর slidedown () পদ্ধতি

JQuery এর slidedown() মেথড এটি দিয়ে উপাদান নিচের দিকে স্লাইড করে।

Syntax

$(selector).slideDown(speed,callback);

বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি স্লাইডিং সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।
নিম্নলিখিত উদাহরণে slidedown () মেথড দেখানো হল:

$("#flip").click(function(){
    $("#panel").slideDown();
});

ফলাফল :  slideDown()

 

jQuery এর slideUp () পদ্ধতি

JQuery এর slideUp () মেথডটি একটি উপাদানকে উপরের দিকে স্লাইড করে।
Syntax

$(selector).slideUp(speed,callback);

এটাও বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি স্লাইডিং সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে slideUp () মেথড দেখানো হলঃ

$("#flip").click(function(){
    $("#panel").slideUp();
});

ফলাফল : slideUp()

 

slideToggle () পদ্ধতি

JQuery এর slideToggle () মেথড slidedown () এবং slideUp () পদ্ধতির মধ্যে toggles করে।

যে সকল উপাদানের স্লাইড নিচে slid হয়েছে, slideToggle () তাদের স্লাইড হবে

যে সকল উপাদানের স্লাইড আপ slid হয়েছে, slideToggle () তাদের নিচে স্লাইড হবে.

Syntax

$(selector).slideToggle(speed,callback);

এটাও বিভিন্ন প্যারামিটার দিয়ে গতির প্রভাবের সময়কাল নির্ধারণ করা হয়। নিম্নলিখিত মান গ্রহণ করতে পারেন: "ধীর", "দ্রুত", বা মিলিসেকেন্ড.
নিম্নলিখিত উদাহরণে slideToggle () মেথড দেখানো হলঃ

$("#flip").click(function(){
    $("#panel").slideToggle();
});

ফলাফল : slideToggle()

 

বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)

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

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

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

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>

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