bootstrap

اسلایدر بوت‌استرپ (Bootstrap Carousels)

اسلایدر بوت‌استرپ (Bootstrap Carousels)
12 مه

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

پایه اصلی یک اسلایدر بوت‌استرپ، المان .carousel است. این عنصر به‌عنوان پوششی برای نمایش اسلایدها عمل می‌کند. معمولاً باید یک شناسه (id) منحصربه‌فرد به آن اختصاص دهید تا کنترل‌های اسلایدر بتوانند آن را هدف قرار دهند.

اجزای داخلی:

  • .carousel-inner: شامل تمام اسلایدهای جداگانه است.
  • .carousel-item: هر اسلاید درون یک div با این کلاس قرار می‌گیرد. اسلاید اول باید کلاس .active داشته باشد تا به‌صورت پیش‌فرض نمایش داده شود.
  • محتوای داخل .carousel-item: می‌تواند یک تصویر با تگ <img> یا هر HTML دیگری باشد.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Carousel</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Carousel</h2>
        <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="https://placehold.jp/800x400.png" class="d-block w-100" alt="First slide">
                </div>
                <div class="carousel-item">
                    <img src="https://placehold.jp/800x400.png" class="d-block w-100" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img src="https://placehold.jp/800x400.png" class="d-block w-100" alt="Third slide">
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

نکات فنی:

  • .slide: ایجاد افکت انتقال نرم برای اسلایدها.
  • data-bs-ride="carousel": فعال‌سازی خودکار اسلایدر در زمان بارگذاری صفحه.
  • d-block w-100: کلاس‌های کمکی برای نمایش کامل تصویر در عرض اسلایدر و واکنش‌گرایی (ریسپانسیو).

کنترل‌ها و نشانگرها

برای امکان پیمایش بین اسلایدها، معمولاً از دکمه‌های قبلی/بعدی و نقاط نشانگر استفاده می‌شود.

کنترل‌ها (.carousel-control-prev / .carousel-control-next):

  • data-bs-target: تعیین شناسه اسلایدر مورد نظر.
  • data-bs-slide="prev" یا "next": جهت حرکت.
  • role="button" و tabindex="0": برای دسترسی‌پذیری.
  • .carousel-control-*-icon: آیکون‌های جهت‌ها.
  • .visually-hidden: متن خوانا برای صفحه‌خوان.

نشانگرها (.carousel-indicators):

  • لیستی از دکمه‌ها که به اسلایدهای خاص اشاره دارند.
  • data-bs-slide-to="n": مشخص کردن شماره اسلاید.
  • aria-current="true": مشخص‌کننده اسلاید فعال فعلی.
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://placehold.jp/800x400.png" class="d-block w-100" alt="First slide">
        </div>
        <div class="carousel-item">
            <img src="https://placehold.jp/800x400.png" class="d-block w-100" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img src="https://placehold.jp/800x400.png" class="d-block w-100" alt="Third slide">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
</div>

برای افزودن توضیح یا متن به هر اسلاید، از یک div با کلاس .carousel-caption استفاده می‌شود که داخل .carousel-item قرار می‌گیرد.

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://placehold.jp/800x400.png" class="d-block w-100" alt="First slide">
            <div class="carousel-caption d-none d-md-block">
                <h5>First slide label</h5>
                <p>Some representative placeholder content for the first slide.</p>
            </div>
        </div>
        </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
</div>
  • d-none d-md-block: پنهان کردن کپشن در موبایل و نمایش در صفحه‌های متوسط به بالا.

گزینه‌های سفارشی‌سازی

فاصله زمانی (data-bs-interval): تعیین مدت زمان بین اسلایدها به میلی‌ثانیه (پیش‌فرض ۵۰۰۰ms). 

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel" data-bs-interval="2000"> </div>

افکت محو شدن (.carousel-fade): تغییر حالت انتقال اسلاید از لغزشی به محو/نمایان شدن.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel"> </div>

پشتیبانی لمسی: به‌صورت پیش‌فرض برای دستگاه‌های لمسی فعال است.

استایل با CSS: می‌توانید کنترل‌ها، کپشن‌ها و نشانگرها را با CSS دلخواه خود طراحی کنید.

ویژگی‌های پیشرفته

  • رابط JavaScript: امکان کنترل برنامه‌نویسی‌شده از طریق API بوت‌استرپ وجود دارد. مثلاً:
const myCarousel = document.getElementById('carouselExample');
const carouselInstance = bootstrap.Carousel.getInstance(myCarousel);

// Go to the next slide
// carouselInstance.next();

// Go to a specific slide
// carouselInstance.slideTo(2);
  • جاسازی مؤلفه‌های دیگر: می‌توانید داخل .carousel-item از دکمه، فرم، کارت و سایر مؤلفه‌ها استفاده کنید.

ملاحظات دسترس‌پذیری

برای تضمین دسترسی کاربران با نیازهای ویژه:

  • role="carousel" برای معرفی اسلایدر.
  • aria-label برای دکمه‌ها و نشانگرها.
  • aria-current="true" برای نشانگر فعال.
  • پشتیبانی از ناوبری با صفحه‌کلید (پیش‌فرض فعال).
  • توقف خودکار روی فوکوس یا هاور: اسلایدر به‌طور پیش‌فرض هنگام تمرکز یا هاور متوقف می‌شود تا محتوا ناگهانی تغییر نکند.

استراتژی‌های خلاقانه در استفاده از اسلایدر

فراتر از نمایش ساده تصاویر فکر کنید! اسلایدرها را می‌توان برای موارد زیر استفاده کرد:

  • چرخش نظرات مشتریان
  • معرفی ویژگی‌های کلیدی محصول
  • نمایش اعضای تیم با بیوگرافی
  • آموزش‌های مرحله‌به‌مرحله
  • بارگیری محتوای پویا از API
  • پس‌زمینه‌های تمام‌صفحه اسلایدری

بهترین شیوه‌ها

  • استفاده با احتیاط: برای اطلاعات مهم فوری از اسلایدر استفاده نکنید.
  • تصاویر باکیفیت: از محتوای بصری جذاب استفاده کنید.
  • متن مختصر: توضیحات را کوتاه و ساده نگه دارید.
  • در نظر گرفتن توقف خودکار: هنگام هاور یا فوکوس، اسلایدر باید متوقف شود.
  • کنترل‌های واضح: دکمه‌ها و نشانگرها باید قابل تشخیص و قابل درک باشند.
  • آزمایش دقیق: عملکرد صحیح در مرورگرها و دستگاه‌های مختلف را بررسی کنید.

نتیجه‌گیری

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

جدیدتر Collapse در Bootstrap
بازگشت به لیست
قدیمی تر کارت ها در Bootstrap یا Card in Bootstrap

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

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