پلاگین Carousel

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


پلاگین Carousel

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

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

مثال Carousel

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.

نکته: 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 بوت استرپ ما مراجعه کنید.


منابع آموزشی