پرش به محتویات

Slider (nestable)

المان Nestable Slider امکان ایجاد اسلایدر با nesting drag-and-drop در سازنده را با استفاده از کتابخانه Splide فراهم می‌کند.

تنظیمات

  • Children (nestable) — المان‌ها را drag and drop کنید تا اسلایدهای اسلایدر ایجاد شود.

گزینه‌ها (Options)

  • Options type (select) — از تنظیمات پیش‌فرض استفاده کنید یا گزینه‌های JSON سفارشی ارائه دهید. گزینه‌ها: default، custom.

  • Custom options (code) — پیکربندی JSON برای اسلایدر Splide. فقط وقتی options type روی custom است نمایش داده می‌شود.

  • Type (select) — رفتار اسلایدر. گزینه‌ها: loop، slide، fade. پیش‌فرض: loop.

  • Direction (select) — جهت اسلاید. گزینه‌ها: left to right، right to left، vertical. از breakpoint‌ها پشتیبانی می‌کند.

  • Keyboard (select) — ناوبری صفحه‌کلید. گزینه‌ها: off، focused، global. پیش‌فرض: global. از breakpoint‌ها پشتیبانی می‌کند.

  • Auto height (checkbox) — ارتفاع را با محتوا تنظیم کنید. ممکن است باعث layout shift شود.

  • Height (number with units) — ارتفاع ثابت اسلایدر. پیش‌فرض: 50vh. وقتی auto height فعال است در دسترس نیست. از breakpoint‌ها پشتیبانی می‌کند.

  • Spacing (number with units) — فاصله بین اسلایدها. پیش‌فرض: 0. از breakpoint‌ها پشتیبانی می‌کند.

  • Start index (number) — ایندکس اسلاید اولیه. پیش‌فرض: 0.

  • Items to show (number) — تعداد اسلایدهای قابل مشاهده در یک زمان. پیش‌فرض: 1. از breakpoint‌ها پشتیبانی می‌کند. برای نوع fade در دسترس نیست.

  • Items to scroll (number) — تعداد اسلایدهای اسکرول در یک بار. پیش‌فرض: 1. از breakpoint‌ها پشتیبانی می‌کند. برای نوع fade در دسترس نیست.

  • Speed in ms (number) — سرعت transition. پیش‌فرض: 400. از breakpoint‌ها پشتیبانی می‌کند.

  • Focus (number) — تعیین می‌کند کدام اسلاید باید فعال باشد اگر carousel چندین اسلاید در یک صفحه داشته باشد. عدد/«center». از breakpoint‌ها پشتیبانی می‌کند.

پخش خودکار (Autoplay)

  • Autoplay (checkbox) — پیشروی خودکار اسلاید را فعال کنید.

  • Pause on hover (checkbox) — پخش خودکار را هنگام hover روی اسلایدر متوقف کنید.

  • Pause on focus (checkbox) — پخش خودکار را هنگام focus روی اسلایدر متوقف کنید.

  • Interval in ms (number) — زمان بین اسلایدها. پیش‌فرض: 3000.

برگشت (Rewind)

وقتی نوع «loop» نیست در دسترس است:

  • Rewind (checkbox) — قابلیت rewind را فعال کنید.

  • Rewind by drag (checkbox) — اجازه دهید با drag، rewind انجام شود.

  • Speed in ms (number) — سرعت transition rewind.

اسلاید (Slide)

  • Padding (spacing) — padding داخل اسلایدها.

  • Align horizontal (align-items) — تراز افقی محتوای اسلاید. گزینه‌ها: flex-start، center، flex-end.

  • Align vertical (justify-content) — تراز عمودی محتوای اسلاید. گزینه‌ها: flex-start، center، flex-end، space-between، space-around.

  • Background (background) — استایل‌دهی پس‌زمینه برای اسلایدها.

  • Border (border) — استایل border برای اسلایدها.

فلش‌ها (Arrows)

  • Show (checkbox) — فلش‌های ناوبری را نمایش دهید.

  • Height (number with units) — ارتفاع دکمه فلش. پیش‌فرض: 50px.

  • Width (number with units) — عرض دکمه فلش. پیش‌فرض: 50px.

  • Background (color) — رنگ پس‌زمینه دکمه فلش.

  • Border (border) — استایل border دکمه فلش.

  • Color (color) — رنگ آیکون فلش.

  • Size (number with units) — اندازه آیکون فلش.

  • Text shadow (text-shadow) — text shadow برای آیکون‌های فلش.

غیرفعال (Disabled)

  • Background (color) — رنگ پس‌زمینه برای فلش‌های غیرفعال.

  • Border (border) — استایل border برای فلش‌های غیرفعال.

  • Color (color) — رنگ آیکون برای فلش‌های غیرفعال.

  • Opacity (number) — شفافیت برای فلش‌های غیرفعال (0-1).

فلش قبلی (Prev arrow)

  • Prev arrow (icon) — آیکون سفارشی برای فلش قبلی.

  • Top، Right، Bottom، Left (number with units) — موقعیت فلش قبلی. پیش‌فرض Top: 50%.

  • Transform (transform) — CSS transform برای فلش قبلی.

فلش بعدی (Next arrow)

  • Next arrow (icon) — آیکون سفارشی برای فلش بعدی.

  • Top، Right، Bottom، Left (number with units) — موقعیت فلش بعدی. پیش‌فرض Top: 50%.

  • Transform (transform) — CSS transform برای فلش بعدی.

صفحه‌بندی (Pagination)

  • Show (checkbox) — نقاط pagination را نمایش دهید. پیش‌فرض: فعال.

  • Margin (spacing) — margin دور نقاط pagination. پیش‌فرض: 5px در همه طرف‌ها.

  • Height (number with units) — ارتفاع نقطه. پیش‌فرض: 10px.

  • Width (number with units) — عرض نقطه. پیش‌فرض: 10px.

  • Color (color) — رنگ نقطه و رنگ پس‌زمینه.

  • Border (border) — استایل border برای نقاط.

فعال (Active)

  • Height (number with units) — ارتفاع نقطه فعال.

  • Width (number with units) — عرض نقطه فعال.

  • Color (color) — رنگ نقطه فعال.

  • Border (border) — استایل border برای نقطه فعال.

مرجع توسعه‌دهنده

JSON schema کامل: slider-nested Schema