ایجاد اسلاید شو در Bootstrap

در این بخش نحوه ایجاد اسلایدشو با استفاده از بوت استرپ را خواهید آموخت.

اسلایدشو یا carousel یکی از بهترین راه های نمایش حجم زیادی از محتوا داخل یک فضای کوچک در یک صفحه وب میباشد. اسلاید شو یک ارائه پویا از محتوا میباشد که در آن تصاویر و متن ها به صورت چرخه ای به کاربر نمایش داده میشوند. مثال زیر نحوه ایجاد یک اسلایدشو با استفاده از پلاگین carousel در بوت استرپ را نمایش میدهد :

























خروجی مثال بالا به شکل زیر خواهد بود :















همچنین میتوانید متن هایی با هدر یا توضیحات به هر کدام از اسلایدها اضافه نمایید که در مثال بعدی مشاهده خواهید کرد.

فعال کردن اسلاید شو با ویژگی  -data :

با استفاده از بوت استرپ میتوانید به راحتی بدون نوشتن حتی یک خط کد جاوا اسکریپت، با استفاده از ویژگی -data ، اسلایدشو ایجاد نمایید.



































خروجی مثال بالا به شکل زیر خواهد بود :











 

توضیح کد :

اسلایدشو در بوت استرپ به سه عنصر اصلی نیاز دارد : مشخصه های اسلایدشو (دایره های کوچک) ، کنترل های اسلایدشو (فلش های قبل و بعد) و آیتم ها یا اسلایدهای اسلایدشو.
- خارجی ترین کانتینر هر اسلایدشو به یک شناسه منحصر به فرد (در مثال ما "id="myCarousel) نیاز دارد تا بتواند توسط مشخصه های اسلایدشو (خط 4،5 و 6) و کنترل های اسلاید شو (خط 33 و 36) لینک شود.
- ویژگی "data-ride="carousel در کلاس carousel. به بوت استرپ میگوید که به محض بارگذاری صفحه، اسلایدشو شروع به حرکت نماید و ویژگی data-interval ، مدت زمان تأخیر بین دو اسلاید را مشخص می نماید.
- ویژگی data-slide-to. (خط 4،5 و6) زمانی که روی یکی از مشخصه های اسلایدشو کلیک شود، موقعیت اسلاید را به یک آیتم خاص حرکت میدهد (شروع index از 0).
- اسلایدها در داخل کلاس carousel-inner. مشخص میشوند (خط9) و محتوای هر اسلاید در داخل item. تعریف میشود که میتواند متن یا تصویر باشد.
- ویژگی data-slide در کنترل های اسلایدشو (خط 33 و 36) ، میتواند کلمات کلیدی قبلی ( prev ) و بعدی ( next ) را دریافت نماید که موقعیت اسلاید را با توجه به موقعیت فعلی آن تغییر میدهد.
- کلاس carousel. ، خود اسلاید شو را تعریف میکند. کلاس carousel-indicators. مشخص میکند که چند اسلاید در اسلایدشو وجود دارد و کدام اسلاید در حال حاضر فعال میباشد. کلاس carousel-caption. در داخل کلاس item. ، عنوان مختص به یک اسلاید را مشخص میکند.
نکته : کلاس slide. ، خصوصیت انیمیشن جا به جایی اسلاید ( slide transition animation ) در CSS را به اسلایدشو اضافه میکند که این خصوصیت در IE 8 و 9 پشتیبانی نمیشود.

فعال سازی اسلایدشو با جاوا اسکریپت :

کافیست تابع ( )carousel را به همراه id یا کلاس تگ در برگیرنده ( wrapper )، در کد جاوا اسکریپت فراخوانی نمایید.





 

آپشن ها :

آپشن های مشخصی در بوت استرپ وجود دارند که میتوانند به تابع ( )carousel پاس داده شوند تا عملکرد آن را تغییر دهند.
 

نام	نوع	مقدار پیش فرض	توضیحات
interval	عدد	5000	میزان تأخیر بین یک اسلاید با اسلاید دیگر را در حالت حرکت اتوماتیک، تعیین میکند (زمان برحسب میلی ثانیه). اگر مقدار آن false باشد حرکت اسلایدشو اتوماتیک نخواهد بود.
pause	رشته	"hover"	در زمان بردن موس بر روی اسلایدشو حرکت آن را متوقف کرده و به محض برداشتن موس از روی آن حرکت را ادامه میدهد.
wrap	boolean	true	مشخص میکند که اسلایدشو به طور مداوم حرکت کند یا بعد از رسیدن به یک اسلاید مشخص کاملاً متوقف شود.
keyboard	boolean	true	مشخص میکند که اسلایدشو به رخدادهای مربوط به کیبورد واکنش نشان دهد یا خیر.

مثال زیر را بررسی کنید تا کاربرد آپشن ها را به خوبی متوجه شوید.









همچنین میتوانید این آپشن ها را از طریق ویژگی  -data تنظیم نمایید. فقط باید نام آپشن را به انتهای -data اضافه کنید. مانند "data-interval="3000 و "data-pause="hover

غیرفعال کردن حرکت اتوماتیک اسلایدها در Bootstrap :

به طور پیش فرض در اسلایدشوهای بوت استرپ بعد از لود شدن صفحه، اسلایدها شروع به حرکت میکنند. برای جلوگیری از حرکت اتوماتیک اسلایدها میتوانید با استفاده از جاوا اسکریپت، آپشن وقفه ( interval ) را false نمایید یا از طریق ویژگی  -data این کار را انجام دهید. مانند :
"data-interval="false در عنصر carousel





 

توابع :

( carousel(options.

این تابع اسلایدشو را با آپشن های دلخواه پیاده سازی کرده و شروع به چرخیدن در بین آیتم ها میکند.






 

('carousel('cycle.

این تابع باعث حرکت چرخشی آیتم های اسلایدشو از چپ به راست میشود.






 

('carousel('pause.

این تابع حرکت اسلایدشو را متوقف میکند.





 

(carousel(number.

این تابع اسلایدشو را تا یک فریم خاص حرکت میدهد (شروع از 0 مانند آرایه).






 

('carousel('prev.

این تابع اسلاید شو را به آیتم قبلی حرکت میدهد.






 

('carousel('next.

این تابع اسلاید شو را به آیتم بعدی حرکت میدهد.






 

رویدادها (Event) :

 

رویداد	توضیحات
slide.bs.carousel	این رویداد به محض فراخوانی تابع slide. ، فعال میشود.
slid.bs.carousel	این رویداد زمانی که اسلاید شو به طور کامل عملیات transition را برای اسلاید انجام میدهد، فعال میشود.

مطلب بعدی -> ایجاد typeahead در Bootstrap

• - آموزش بوت استرپ
• - آموزش متریال دیزاین
• - مطالب آموزشی سئو

---