ساخت اسلایدر در بوت‌استرپ ۴
با استفاده از 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="myhamyar.jpg" alt="Los Angeles" width="1100" height="500"> </div> <div class="carousel-item"> <img src="myhamyar2.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 |
<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> |
بیشتر بخوانیم:
مطالب زیر را حتما مطالعه کنید
آموزش انیمیشن‌سازی با CSS
نحوه اضافه کردن کد PHP در وردپرس
دوره رایگان طراحی فروشگاه اینترنتی!
آموزش ایجاد لیست کشویی وابسته به هم در HTML
ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید
دیدگاهتان را بنویسید