آموزش کار با پلاگین Carousel جهت ساخت اسلایدر

آموزش کار با پلاگین Carousel جهت ساخت اسلایدر

سلام. در ادامه مطالب آموزشی بوت استرپ توی این مطلب آموزش کار با پلاگین Carousel جهت ساخت اسلایدر در بوت استرپ رو خدمت دوستان ارائه می نماییم. پلاگین Carousel یک کامپوننت برای ایجاد حلقه بر روی عنصرهامی باشد، مانند یک اسلایدشو. لطفا در ادامه مطلب با ما همراه باشید…

آموزش کار با پلاگین Carousel جهت ساخت اسلایدر

پلاگین Carousel یک کامپوننت برای ایجاد یک حلقه مانند Carousel در بین عناصر است. (اسلاید شو)

نکته : پلاگین ها را میتوان به صورت جداگانه اضافه کرد. ( برای استفاده از فایل جداگانه بوت استرپ از کلاس carousel.js استفاده کنید.) و یا به صورت یکجا (از کلاس های bootstrap.min.js یا bootstrap.js استفاده نمایید.)

1

 

طریقه ساخت یک اسلایدشو با Carousel

مثال زیر نحوه ساخت یک Carousel را به شما نشان میدهد :

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

جهت مشاهده مثال این تمرین کلیک نمایید

توضیح مثال بالا :

بیرونی ترین و خارجی ترین عنصر <div> :

برای ساخت کروسل ها نیازمند استفاده از یک Id  برای کنترل درست تنظیمات هستیم ( در این مورد id=”myCarousel” )

کلاس class=”carousel” وجود یک کروسل را در عنصر <div> نشان می دهد. کلاس .slide یک انتقال CSS و افکت انیمیشنی اضافه میکند که باعث حالت اسلایدی گرفتن عکسا هنگام نشان دادن ایتم های بعدی میشود. اگر افکت اسلاید را نمیخواهید از این بخش صرف نظرکنید.

خاصیت data-ride=”carousel” باعث شروع حرکت انیمیشنی کروسل بلافاصله به هنگام لود شدن صفحه میشود.

آموزش کار با پلاگین Carousel جهت ساخت اسلایدر

 

بخش Indicator ها در بوت استرپ

Indicator ها همان دایره ها/نقطه های کوچک پایین صفحه هستند که نشان میدهند چند اسلاید دیگر در کروسل وجود دارد و در حال حاضر در کدام اسلاید هستیم.

Indicator ها در یک لیست منظم با کلاس carousel-indicators مشخص می شوند.

کلاس data-target به Id کروسل اشاره میکند.

کلاس data-slide-to مشخص میکند که هنگام کلیک کردن روی یک دکمه خاص به کدام اسلاید بریم.

 

بخش Wrapper for slides

اسلایدرها در عنصر <div> با کلاس carousel-inner مشخص میشوند.

محتوی هر اسلاید در یک عنصر <div> با کلاس .item تعریف می شود. این محتوی میتواند متن و یا تصویر باشد.

کلاس active باید به یکی از اسلاید ها اضافه شود. در غیر این صورت کروسل مرئی و قابل مشاهده نخواهد بود.

 

بخش Left and rigt controls

این بخش دکمه های “راست” و “چپ” را به اسلاید اضافه میکند که به کاربر اجازه میدهد به صورت دستی اسلاید ها را عقب جلو کند.

خاصیت data-slide کلمات کلیدی (keywords) مانند “next” یا “prev” را می پذیرد که موقیعت اسلاید را بسته به شرایط کنونی اش تغییر میدهد .

 

اضافه کردن کپشن به اسلاید ها

برای ساخت کپشن برای هراسلاید کلاس <div class=”carousel-caption”> را دروه هر <div class=”item”> اضافه کنید.

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

جهت مشاهده مثال این تمرین کلیک نمایید

برای تازه شدن دیر نیست

موفق و پیروز باشید

4.2/5 - (5 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

آموزش جامع برنامه نویسی PHP و MySQL به همراه صفر تا صد ساخت فروشگاه اینترنتی
  • انتشار: ۲ شهریور ۱۳۹۵

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

  1. سلام تو قسمت تست همین کدی که نوشتید درست کار نمیکنه و عکس هارو زیر هم نشون میده

  2. سلام
    با تشکر از آموزش های خوبتون
    من کد اسلایدشو رو قرار دادم و به درستی جواب میده اما من میخوام سایز تصاویر اسلاید رو با width , height تغییر بدم ولی متاسفانه هیچ تغییری در سایز تصاویر ایجاد نمیشه و همون سایز تعریف شده قبلی نمایش داده میشه .
    اگر ممکن هست راهنماییم کنید .

بازخوردهای خود را برای ما ارسال کنید

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.