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