carousel

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

نکته

برای راهنمای کامل اسلایدر به سایت رسمی مراجعه کنید

مثال ها

components-carousles.html یا component-sliders.html را باز کنید (نام ها می توانند متفاوت باشند) و نمونه های ارائه شده را بررسی کنید. ما همیشه همه گزینه های ممکن را در آن صفحه نشان میدهیم. با این حال، اجازه دهید ساختار اصلی یک اسلایدر را توضیح دهیم.

html

<div class="splide SLIDER-TYPE ARROW-OPTIONS DOTS-OPTIONS" id="UNIQUE-SLIDER-ID-1">
    <div class="splide__track">
        <div class="splide__list">
            <div class="splide__slide">
                <!-- Place the content or cards or images you want here this is a slide -->
            </div>
            <div class="splide__slide">
                <!-- Place the content or cards or images you want here this is a slide -->
            </div>
            <div class="splide__slide">
                <!-- Place the content or cards or images you want here this is a slide -->
            </div>
        </div>
    </div>
</div>

توضیحات کد

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

• خط 1: ابتدای تگ اسلایدر است. این تگ، فلش ها و نقاط اسلایدر را مشخص میکند. کلاس‌های زیر را که در خط یک مشاهده میکنید، با اسلایدری که میخواهید استفاده کنید، جایگزین کنید.

  • SLIDER-TYPE: تعداد اسلایدها در هر نما را تنظیم میکند. SLIDER-TYPE را با single-slider یا double-slider یا triple-slider جایگزین کنید.

  • ARROW-OPTIONS: فلش های اسلایدر را فعال یا غیرفعال میکند. برای مخفی کردن فلش ها، آن را با slider-no-arrows جایگزین یا برای نمایش آن، را با slider-has-arrows جایگزین کنید.

  • DOTS-OPTIONS: نقاط زیر اسلایدر را فعال یا غیرفعال میکند. برای مخفی کردن نقاط، آن را با slider-no-dots جایگزین یا برای نمایش، آن را با slider-has-dots جایگزین کنید.

  • UNIQUE-SLIDER-ID-1: شما حتما باید به هر اسلایدری ای که در صفحه خود دارید یک آی دی منحصر به فرد بدهید. با دادن آی دی یکسان، اسلایدر باعث خطا میشود و اسلایدرها غیرفعال میشوند.

• خط 2: مسیر اسلایدر است. اینجاست که فلش‌ها نقاط و کنترل‌ها به اسلایدر اضافه میشوند و تا زمان درخواست پنهان میشوند. این المان همچنین به منظور تعیین موقعیت نسبی برای المان های داخلی است. این خط الزامی است

• خط 3 : لیست اسلایدها است. در داخل این، شما میتوانید آیتم های خود را اضافه کنید.

• خط 4 تا خط 6 یک اسلاید است. نام کلاس ضروری است. هر چیزی را که میخواهید در اینجا اضافه کنید و این خطوط را برای ایجاد اسلایدهای بیشتر کپی کنید.

میتوانید از کلاس single-slider برای تولید یک اسلایدر استفاده کنید که تنها 1 اسلاید در هر نما داشته باشد، یا از double-slider را ایجاد کنید که دارای 2 اسلاید در هر نما است. و triple-slider که در هر نما 3 اسلاید خواهد داشت. در این مثال، ما از کارت‌های ارتفاع ثابت برای ایجاد اسلایدرهای زیبایی که در سراسر صفحه خود میبینید، استفاده کردیم. اینها امکان کنترل محل اضافه شدن متن را فراهم میکنند و همچنین از کلاس‌های کمکی برای سایه‌ها، حاشیه‌های گرد، رنگ‌های پس‌زمینه، گرادینت‌ها و هر چیزی که میتوانید به کارت متصل کنید، پشتیبانی میکند.

برای ایجاد یک اسلایدر با ارتفاع کامل یا اسلایدر خوشامدگویی، باید با کارت هایی که دارای data-card-height="cover" هستند ترکیب شود.

خط 5، 8، 11: این قسمت اصلی اسلایدر شماست. صرف نظر از اینکه از اسلایدر دوتایی، تکی یا کاور استفاده میکنید، هر اسلاید باید در div جداگانه خود باشد. این بدان معناست که برای مثال، نمیتوانید شروع به نوشتن یک عنوان، یک پاراگراف و یک دکمه کنید و انتظار داشته باشید که اسلایدر بداند که این یک اسلاید است. این موارد باید در div های جداگانه قرار گیرند. در این قسمت، کارت‌ها مفیدترین المان ها هستند که میتوانید استفاده کنید. توصیه میشود از کارت‌های با ارتفاع ثابت استفاده کنید زیرا این کارت‌ها بهترین کنترل را بر اندازه اسلایدر و بر روی هر عنصر متن و تصویر اسلاید به صورت جداگانه به شما میدهند.

برای اطلاعات بیشتر به صفحه component-carousels.html مراجعه کنید و اگر مشکلی دارید تیکت ارسال کنید.