نحوه‌ی کار با قابلیت Carousel جهت ساخت اسلایدر در بوت‌استرپ ۴
با استفاده از Carousel برای ساخت اسلایدر در بوت‌استرپ، می‌توانید تصاویری که در یک چرخه درحال چرخیدن هستند را به صورت منظم یا تصادفی برای کاربران نمایش دهید. این‌کار می‌تواند باعث جذب مخاطبان زیادی به وب‌سایت و انجام تبلیغات توسط وب‌سایت شما شود.
در این بخش از دوره آموزش بوت‌استرپ به نحوه ساخت اسلایدرها در بوت‌استرپ خواهیم پرداخت. می‌توانید برای دسترسی به سایر بخش‌ها، دوره رایگان آموزش بوت‌استرپ ۴ را مطالعه فرمایید.
اسلایدر تصاویر (carousel) در بوت‌استرپ
در دنیای وب به چند تصویر که در کنارهم برای انتقال پیام، به‌صورت متحرک نمایش داده می‌شوند، اسلایدر می‌گویند. این تصاویر توسط شما انتخاب شده و اسلایدر، آن‌ها را با بازه‌های زمانی مشخص نمایش می‌دهد. اسلایدر یکی از تاثیرگذارترین نوع تبلیغات در وب‌سایت‌ها می‌باشد. به‌همین‌جهت باید در انتخاب عکس و محتوای آن نهایت دقت را داشته باشید. همچنین از اسلایدر علاوه بر جنبه تبلیغاتی به عنوان تصاویر معرفی محصولات و خدمات نیز استفاده می‌شود.
در یک صفحه‌ی وب می‌توان به کمک تگ‌ها HTML نیز تعدادی تصویر قرار داد و به کمک CSS به آن‌ها سبک متفاوت بخشید. اگر بخواهید این تصاویر به صورت یک اسلایدر همراه با افکت‌های مختلف در صفحه نمایش داده شوند، می‌توانید به کمک زبان جاوا اسکریپت، آلبوم تصاویر را به یک اسلایدر پویا تبدیل کنید.
همچنین در Bootstrap4 به‌راحتی با استفاده از Carousel و دیگر کلاس‌هایی که این فریمورک در اختیار شما قرار می‌دهد، می‌توانید اسلایدرهای جذاب بسازید. در مثال زیر یک اسلایدر پایه در بوت‌استرپ نشان داده شده است:
با استفاده از کد زیر می‌توانید یک اسلایدر ساده طراحی کنید:
1 2 3 4 5 6 7 8 9 10 | <div id="demo" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="adminesite1.jpg" alt="Los Angeles" width="1100" height="500"> </div> <div class="carousel-item"> <img src="adminesite2.jpg" alt="Chicago" width="1100" height="500"> </div> </div> </div> |
محتوای هر اسلاید در یک عنصر <div> با کلاس .item تعریف می شود. این محتوا می‌تواند متن و یا تصویر باشد. کلاس active باید به یکی از اسلایدها اضافه شود. در غیر این صورت کروسل مرئی و قابل مشاهده نخواهد بود.
همچنین می‌توانید با اضافه کردن کلاس Indicator، نقطه‌های کوچکی در پایین صفحه اسلایدر ایجاد کنید. این نقطه‌ها نشان می‌دهند چند اسلاید دیگر در کروسل وجود دارد و در حال حاضر در کدام اسلاید هستید.
استفاده از کلاس‌های مختلف در اسلایدر
به‌طور کلی برای ساخت اسلایدر از کلاس Carousel استفاده می‌شود. برای اضافه کردن المان‌های مختلف به اسلایدرهای یک وب‌سایت می‌توانید از کلاس‌های زیر استفاده کنید:
| .carousel-indicators | برای اضافه کردن نقاط کوچک در زیر عکس برای نمایش تعداد عکس‌ها و هدایت کردن آن‌ها استفاده می‌شود. |
| .carousel-item | برای افزودن محتوای هر اسلاید به صورت اختصاصی استفاده می‌شود. |
| .carousel-control-prev | برای افزودن فلش برگشت به عقب، از این کلاس استفاده می‌شود. |
| .carousel-control-next | برای افزودن فلش هدایت به جلو، از این کلاس استفاده می‌شود. |
افزودن زیرنویس به اسلایدر
بوت‌استرپ ۴ قابیلیتی را اضافه کرده است که با استفاده از آن می‌توانید توضیحاتی را در زیر تصاویر ثبت کنید. برای ایجاد این زیرنویس‌ها در هر اسلاید، عناصر داخل <div class = “carousel-caption”> را به <div class = “carousel-item”> اضافه کنید:
1 2 3 4 5 6 7 8 | <div class="carousel-item"> <img src="la.jpg" alt="Los Angeles"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>We had such a great time in LA!</p> </div> </div> |
امیدوارم از این آموزش لذت برده باشید!
دیدگاهتان را بنویسید
برای ارسال نظر باید وارد سیستم شوید.