پلاگین Carousel

« صفحهٔ قبل

صفحهٔ بعد »

پلاگین Carousel یک مؤلفه برای ایجاد چرخه در میان عناصر است مانند یک چرخ و فلک (اسلایدشو).

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

مثال Carousel

نکته: Carouselها در Internet Explorer 9 و قدیمی‌تر به خوبی پشتیبانی نمی‌شوند (زیرا آنها از Transition و انیمیشن‌های CSS3 برای دستیابی به حالت اسلاید استفاده می‌کنند).

نحوهٔ ایجاد یک 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>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

مشاهدهٔ نتیجه

توضیح مثال

• بیرونی‌ترین تگ <div>:

Carousel نیازمند استفاده از یک آی دی (در این حالت id="myCarousel") برای کنترل‌های Carousel بمنظور عملکرد درست است.

class="carousel" مشخص می‌کند که این <div> دارای یک Carousel است.

کلاس .slide یک حالت انتقالی و متحرک CSS ایجاد می‌کند، که منجر به حرکت آیتم‌ها به هنگام نمایش آیتم جدید می‌شود. در صورت عدم نیاز به این حالت، این کلاس را حذف کنید.

ویژگی data-ride="carousel" به بوت استرپ اعلام می‌کند که به محض بازگذاری صفحه حرکت دادن را آغاز کند.

• بخش «شاخص ها» (Indicators):

شاخص‌ها نقطه‌های کوچک در پایین هر اسلاید هستند (که نشان می‌دهند چند اسلاید در Carousel وجود دارد و در حال حاضر کدام اسلاید نمایش داده می‌شود).

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

ویژگی data-target به آی دی Carousel اشاره می‌کند.

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

• بخش «پوشاننده (Wrapper) برای اسلاید ها»:

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

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

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

• بخش «کنترل‌های راست و چپ»:

این کد کلیدهای «راست» و «چپ» را ایجاد می‌کند که کاربر را قادر می‌سازند بین اسلایدها بصورت دستی جلو و عقب برود.

ویژگی data-slide کلید واژه‌های "prev" و "next" را می‌پذیرد که مکان اسلاید را نسبت به مکان فعلی آن تغییر می‌دهد.

اضافه کردن زیرنویس (Caption) به اسلایدها

به‌منظور ایجاد زیرنویس برای هر اسلاید <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>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="la.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Los Angeles</h3>
        <p>LA is always so much fun!</p>
      </div>
    </div>

    <div class="item">
      <img src="chicago.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago!</p>
      </div>
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>We love the Big Apple!</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

مشاهدهٔ نتیجه

مرجع کامل Carousel بوت استرپ

برای دسترسی به مرجع همهٔ امکانات Carousel، متدها و رویدادها، به مرجع Carousel JS بوت استرپ ما مراجعه کنید.

« صفحهٔ قبل

صفحهٔ بعد »