افزونه و کلاس Carousel در بوت استرپ bootstrap

مقالات

افزونه Carousel یا چرخ دنده بوت استرپ

پلاگین چرخ دنده یک جزء برای چرخیدن از طریق عناصر، مانند یک چرخ فلک (نمایش اسلاید) است.

[highlight color=”yellow”]نکته: پلاگین ها را می توان به طور جداگانه استفاده کرد(با استفاده از فایل “carousel.js” فرد بوت استرپ) یا همه در یک چیز (با استفاده از bootstrap.js یا bootstrap.min.js).[/highlight]

[highlight color=”yellow”]توجه: چرخ فلک ها به درستی در اینترنت اکسپلورر 9 و نسخه جدید تر پشتیبانی نمی شوند (زیرا آنها برای انتقال اثر اسلاید از CSS3 استفاده می کنند و انیمیشن ها را از بین می برند ).[/highlight]

چگونه یک 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>

</ol>

</div>

</div>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

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

خارج از محدوده <div>:

carosel نیاز به استفاده از id(در این مورد ID = “myCarousel”) دارد برای کنترل عملکرد درست carosel ها.

class = “carousel” مشخص می کند که این <div> حاوی carosel است.

کلاس .slide یک افکت CSS transition و animation اضافه می کند که در هنگام نمایش یک آیتم جدید اسلایدها جدید ایجاد می شود یا اسلاید ورق می خورد. اگر این افکت را نمی خواهید اعمال شود، این کلاس را حذف کنید.

ویژگی data-ride = “carousel” به Bootstrap میگوید که وقتی صفحه بارگذاری می شود، انیمیشن carosel شروع به کار میکند.

بخش «indicator ها»:

indicator ها نقطه های کوچکی در پایین هر اسلاید (که نشان می دهد که چند اسلایدر در carosel وجود دارد و کدام اسلایدر کاربر در حال مشاهده است).

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

خصیصه data-target به id چرخ فلک اشاره می کند.

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

بخش “بسته بندی برای اسلاید Wrapper for slides“:

اسلایدها در <div> با کلاس carousel-internal. مشخص شده است.

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

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

بخش کنترل چپ و راست:

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

ویژگی 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>
  </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>

</ol>

<h3>Los Angeles</h3>

<p>LA is always so much fun!</p>

</div>

<h3>Chicago</h3>

<p>Thank you, Chicago!</p>

</div>

<p>We love the Big Apple!</p>

</div>

<span class="sr-only">Previous</span>

</a>

</a>

</div>

Rate this post

افزونه و کلاس Carousel در بوت استرپ bootstrap

افزونه Carousel یا چرخ دنده بوت استرپ

چگونه یک Carousel ایجاد کنیم؟

بخش «indicator ها»:

بخش “بسته بندی برای اسلاید Wrapper for slides“:

بخش کنترل چپ و راست:

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

مطالب زیر را حتما مطالعه کنید

1 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

افزونه Carousel یا چرخ دنده بوت استرپ

چگونه یک Carousel ایجاد کنیم؟

بخش «indicator ها»:

بخش “بسته بندی برای اسلاید Wrapper for slides“:

بخش کنترل چپ و راست:

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

مطالب زیر را حتما مطالعه کنید

کلاس collapse در بوت استرپ bootstrap

کلاس jumbotron در بوت استرپ

فیلترهای بوت استرپ

افزونه Affix بوت استرپ

افزونه Scrollspy بوت استرپ

افزونه Popover بوت استرپ

1 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ