پلاگین Carousel

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳

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

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

مثال Carousel

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

نحوهٔ ایجاد یک Carousel

مثال زیر نحوهٔ ایجاد یک Carousel ساده را نشان می‌دهد:

مثال

 1 <div id="myCarousel" class="carousel slide" data-ride="carousel">
 2   <!-- Indicators -->
 3   <ol class="carousel-indicators">
 4     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 5     <li data-target="#myCarousel" data-slide-to="1"></li>
 6     <li data-target="#myCarousel" data-slide-to="2"></li>
 7   </ol>
 8 
 9   <!-- Wrapper for slides -->
10   <div class="carousel-inner">
11     <div class="item active">
12       <img src="la.jpg" alt="Los Angeles">
13     </div>
14 
15     <div class="item">
16       <img src="chicago.jpg" alt="Chicago">
17     </div>
18 
19     <div class="item">
20       <img src="ny.jpg" alt="New York">
21     </div>
22   </div>
23 
24   <!-- Left and right controls -->
25   <a class="left carousel-control" href="#myCarousel" data-slide="prev">
26     <span class="glyphicon glyphicon-chevron-left"></span>
27     <span class="sr-only">Previous</span>
28   </a>
29   <a class="right carousel-control" href="#myCarousel" data-slide="next">
30     <span class="glyphicon glyphicon-chevron-right"></span>
31     <span class="sr-only">Next</span>
32   </a>
33 </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"> اضافه کنید.

مثال

 1 <div id="myCarousel" class="carousel slide" data-ride="carousel">
 2   <!-- Indicators -->
 3   <ol class="carousel-indicators">
 4     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 5     <li data-target="#myCarousel" data-slide-to="1"></li>
 6     <li data-target="#myCarousel" data-slide-to="2"></li>
 7   </ol>
 8 
 9   <!-- Wrapper for slides -->
10   <div class="carousel-inner">
11     <div class="item active">
12       <img src="la.jpg" alt="Chania">
13       <div class="carousel-caption">
14         <h3>Los Angeles</h3>
15         <p>LA is always so much fun!</p>
16       </div>
17     </div>
18 
19     <div class="item">
20       <img src="chicago.jpg" alt="Chicago">
21       <div class="carousel-caption">
22         <h3>Chicago</h3>
23         <p>Thank you, Chicago!</p>
24       </div>
25     </div>
26 
27     <div class="item">
28       <img src="ny.jpg" alt="New York">
29       <div class="carousel-caption">
30         <h3>New York</h3>
31         <p>We love the Big Apple!</p>
32       </div>
33     </div>
34   </div>
35 
36   <!-- Left and right controls -->
37   <a class="left carousel-control" href="#myCarousel" data-slide="prev">
38     <span class="glyphicon glyphicon-chevron-left"></span>
39     <span class="sr-only">Previous</span>
40   </a>
41   <a class="right carousel-control" href="#myCarousel" data-slide="next">
42     <span class="glyphicon glyphicon-chevron-right"></span>
43     <span class="sr-only">Next</span>
44   </a>
45 </div>


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


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

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


منابع آموزشی