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

Slider

المان Slider با استفاده از کتابخانه Swiper، یک اسلایدر تصویر full-width با اسلایدهای قابل سفارشی‌سازی حاوی عنوان، محتوا و دکمه‌ها ایجاد می‌کند.

تنظیمات

  • Slides (repeater) — اسلایدهای slider را اضافه کنید. هر اسلاید شامل:
  • Title (text) — عنوان اسلاید.
  • Title Tag (select) — تگ HTML برای عنوان. گزینه‌ها: h1-h6. پیش‌فرض: h3.
  • Content (rich text) — محتوای اسلاید.
  • Button text (text) — متن دکمه call-to-action.
  • Button style (select) — استایل دکمه. پیش‌فرض: light.
  • Button size (select) — اندازه دکمه.
  • Button width (number with units) — عرض دکمه.
  • Button link (link) — مقصد دکمه.
  • Button background (color) — رنگ پس‌زمینه دکمه.
  • Button border (border) — استایل border دکمه.
  • Button box shadow (box-shadow) — سایه دکمه.
  • Button typography (typography) — استایل متن دکمه.
  • Background (background) — پس‌زمینه اسلاید (رنگ، تصویر، گرادیان).

  • Overlay (color) — رنگ overlay روی پس‌زمینه.

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

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

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

  • Height (number with units) — ارتفاع slider. پیش‌فرض: 300px.

  • Effect (select) — افکت transition. گزینه‌ها: slide، fade، cube، coverflow، flip. پیش‌فرض: slide.

  • Loop (select) — حلقه بی‌نهایت را فعال کنید. گزینه‌ها: enable، disable. پیش‌فرض: enable.

  • Center mode (checkbox) — اسلاید فعال را در مرکز نگه دارید.

  • Disable lazy load (checkbox) — همه تصاویر را فوری بارگذاری کنید.

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

  • Pause on hover (checkbox) — autoplay را هنگام hover متوقف کنید.

  • Stop on last slide (checkbox) — autoplay را در اسلاید آخر متوقف کنید.

  • Autoplay delay in ms (number) — تأخیر بین اسلایدها به میلی‌ثانیه. پیش‌فرض: 3000.

  • Animation speed in ms (number) — سرعت transition به میلی‌ثانیه. پیش‌فرض: 300.

عنوان (Title)

  • Title margin (spacing) — margin دور عنوان اسلایدها.

  • Title typography (typography) — تنظیمات فونت عنوان اسلایدها.

محتوا

  • Content width (number with units) — حداکثر عرض محتوای اسلاید.

  • Content background (color) — رنگ پس‌زمینه محتوای اسلاید.

  • Content typography (typography) — تنظیمات فونت محتوای اسلاید.

  • Content margin (spacing) — margin دور محتوای اسلاید.

  • Content padding (spacing) — padding داخل محتوای اسلاید. پیش‌فرض: 30px بالا، 60px راست، 30px پایین، 60px چپ.

  • Content align horizontal (justify-content) — تراز افقی محتوا داخل اسلایدها.

  • Content align vertical (align-items) — تراز عمودی محتوا داخل اسلایدها.

  • Content text align (text-align) — تراز متن داخل محتوای اسلاید.

دکمه (Button)

  • Button style (select) — استایل global دکمه. پیش‌فرض: light.

  • Button size (select) — اندازه global دکمه.

  • Button width (number with units) — عرض global دکمه.

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

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

  • Box shadow (box-shadow) — سایه global دکمه.

  • Typography (typography) — استایل متن global دکمه.

پس‌زمینه (Background)

  • Top (number with units) — موقعیت بالای تصویر پس‌زمینه.

  • Right (number with units) — موقعیت راست تصویر پس‌زمینه.

  • Bottom (number with units) — موقعیت پایین تصویر پس‌زمینه.

  • Left (number with units) — موقعیت چپ تصویر پس‌زمینه.

فلش‌های ناوبری (Arrows)

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

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

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

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

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

  • Typography (typography) — استایل متن دکمه فلش.

فلش قبلی (Prev arrow)

  • Prev arrow (icon) — آیکون فلش قبلی. پیش‌فرض: ion-ios-arrow-back.

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

  • Right (number with units) — موقعیت راست فلش قبلی.

  • Bottom (number with units) — موقعیت پایین فلش قبلی.

  • Left (number with units) — موقعیت چپ فلش قبلی. پیش‌فرض: 50px.

  • Transform (transform) — تبدیل فلش قبلی.

فلش بعدی (Next arrow)

  • Next arrow (icon) — آیکون فلش بعدی. پیش‌فرض: ion-ios-arrow-forward.

  • Top (number with units) — موقعیت بالای فلش بعدی.

  • Right (number with units) — موقعیت راست فلش بعدی.

  • Bottom (number with units) — موقعیت پایین فلش بعدی.

  • Left (number with units) — موقعیت چپ فلش بعدی.

  • Transform (transform) — تبدیل فلش بعدی.

نقاط (Dots)

  • Show dots (checkbox) — نقاط pagination را نمایش دهید.

  • Dynamic dots (checkbox) — pagination گلوله‌ای پویا را فعال کنید.

  • Vertical (checkbox) — نقاط را عمودی نمایش دهید.

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

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

  • Top (number with units) — موقعیت بالای container نقاط.

  • Right (number with units) — موقعیت راست container نقاط.

  • Bottom (number with units) — موقعیت پایین container نقاط.

  • Left (number with units) — موقعیت چپ container نقاط.

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

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

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

  • Margin (spacing) — margin دور نقاط تکی.

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

JSON schema کامل: slider Schema