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

تاریخ انتشار: 30 دی 1394

تعداد بازدید: 301 نفر

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

اسلایدشو یا 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

مطالب مرتبط

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

با استفاده از قدرت تایپوگرافی، طراحان می توانند تجربیات دیجیتالی فریبنده و فراموش نشدنی ایجاد کنند که مجذوب، اطلاع رسانی و تأثیر ماندگاری بر روی کاربران می شود. در این مقاله قصد داریم به صورت کامل مفهموم تایپوگرافی در طراحی سایت را برای شما شرح دهیم.

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

ناوبری از مهم ترین عناصر طراحی سایت است که این مقاله به اهمیت طرح‌بندی و ناوبری در طراحی سایت، ارائه اصول کلیدی، استراتژی‌ها و بهترین شیوه‌ها برای بهینه‌سازی وب‌سایت شما برای موفقیت می‌پردازد.