پلاگین Carousel
پرش به ناوبری
پرش به جستجو
پلاگین 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 بوت استرپ ما مراجعه کنید.
منابع آموزشی