نحوه‌ی کار با قابلیت Carousel جهت ساخت اسلایدر در بوت‌استرپ ۴


نویسنده:
شنبه ۸ آذر ۱۳۹۹
اسلایدر در بوت استرپ

با استفاده از Carousel برای ساخت اسلایدر در بوت‌استرپ، می‌توانید تصاویری که در یک چرخه درحال چرخیدن هستند را به صورت منظم یا تصادفی برای کاربران نمایش دهید. این‌کار می‌تواند باعث جذب مخاطبان زیادی به وب‌سایت و انجام تبلیغات توسط وب‌سایت شما شود.

در این بخش از دوره آموزش بوت‌استرپ به نحوه ساخت اسلایدرها در بوت‌استرپ خواهیم پرداخت. می‌توانید برای دسترسی به سایر بخش‌ها، دوره رایگان آموزش بوت‌استرپ ۴ را مطالعه فرمایید.

اسلایدر تصاویر (carousel) در بوت‌استرپ

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

در یک صفحه‌ی وب می‌توان به کمک تگ‌ها HTML نیز تعدادی تصویر قرار داد و به کمک CSS به آن‌ها سبک متفاوت بخشید. اگر بخواهید این تصاویر به صورت یک اسلایدر همراه با افکت‌های مختلف در صفحه نمایش داده شوند، می‌توانید به کمک زبان جاوا اسکریپت، آلبوم تصاویر را به یک اسلایدر پویا تبدیل کنید.

همچنین در Bootstrap4 به‌راحتی با استفاده از Carousel و دیگر کلاس‌هایی که این فریمورک در اختیار شما قرار می‌دهد، می‌توانید اسلایدرهای جذاب بسازید. در مثال زیر یک اسلایدر پایه در بوت‌استرپ نشان داده شده است:

اسلایدر در بوت‌استرپ

با استفاده از کد زیر می‌توانید یک اسلایدر ساده طراحی کنید:

محتوای هر اسلاید در یک عنصر <div> با کلاس .item تعریف می شود. این محتوا می‌تواند متن و یا تصویر باشد. کلاس active باید به یکی از اسلایدها اضافه شود. در غیر این صورت کروسل مرئی و قابل مشاهده نخواهد بود.

همچنین می‌توانید با اضافه کردن کلاس Indicator،‌ نقطه‌های کوچکی در پایین صفحه اسلایدر ایجاد کنید. این نقطه‌ها نشان می‌دهند چند اسلاید دیگر در کروسل وجود دارد و در حال حاضر در کدام اسلاید هستید.

استفاده از کلاس‌های مختلف در اسلایدر

به‌طور کلی برای ساخت اسلایدر از کلاس Carousel استفاده می‌شود. برای اضافه کردن المان‌های مختلف به اسلایدرهای یک وب‌سایت می‌توانید از کلاس‌های زیر استفاده کنید:

.carousel-indicatorsبرای اضافه کردن نقاط کوچک در زیر عکس برای نمایش تعداد عکس‌ها و هدایت کردن آن‌ها استفاده می‌شود.
.carousel-item برای افزودن محتوای هر اسلاید به صورت اختصاصی استفاده می‌شود.
.carousel-control-prev برای افزودن فلش برگشت به عقب، از این کلاس استفاده می‌شود.
.carousel-control-next برای افزودن فلش هدایت به جلو، از این کلاس استفاده می‌شود.


افزودن زیرنویس به اسلایدر

بوت‌استرپ ۴ قابیلیتی را اضافه کرده است که با استفاده از آن می‌توانید توضیحاتی را در زیر تصاویر ثبت کنید. برای ایجاد این زیرنویس‌ها در هر اسلاید، عناصر داخل <div class = “carousel-caption”> را به <div class = “carousel-item”> اضافه کنید:

اسلایدر در بوت‌استرپ

امیدوارم از این آموزش لذت برده باشید!

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *