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

Carousel

المان Carousel با استفاده از کتابخانه Swiper، تصاویر یا پست‌ها را در یک carousel قابل swipe با ناوبری و افکت‌های قابل سفارشی‌سازی نمایش می‌دهد.

تنظیمات

  • Type (select) — نوع محتوا. گزینه‌ها: media، posts. پیش‌فرض: media.

  • Images (image-gallery) — تصاویر carousel را انتخاب کنید. فقط برای نوع media نمایش داده می‌شود.

  • Query (query) — پیکربندی کنید کدام پست‌ها نمایش داده شوند. فقط برای نوع posts نمایش داده می‌شود.

تنظیمات

  • Adaptive height (checkbox) — ارتفاع را با محتوا تنظیم کنید.

  • Height (number with units) — ارتفاع ثابت carousel. پیش‌فرض: 300px. وقتی adaptive height فعال است در دسترس نیست.

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

  • Initial slide (number) — ایندکس اسلاید شروع. پیش‌فرض: 0.

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

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

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

  • Align items (align-items) — تراز عمودی اسلایدها. فقط وقتی adaptive height فعال است نمایش داده می‌شود.

  • Loop (checkbox) — حلقه بی‌نهایت را فعال کنید. پیش‌فرض: true.

  • 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.

تصویر

  • Hide image (checkbox) — تصاویر را در carousel پست مخفی کنید.

  • Image size (select) — اندازه تصاویر.

  • Link to lightbox (checkbox) — تصاویر را در lightbox باز کنید. فقط برای نوع media.

  • Image size (select) — اندازه تصاویر در lightbox.

  • Image click action (select) — اکشن هنگام کلیک روی تصاویر. گزینه‌ها: zoom، zoom-or-close، toggle-controls، next، close. پیش‌فرض: zoom.

  • Animation (select) — نوع انیمیشن lightbox. پیش‌فرض: zoom.

  • Caption (checkbox) — کپشن تصاویر را در lightbox نمایش دهید.

  • Thumbnail navigation (checkbox) — ناوبری thumbnail را در lightbox نمایش دهید.

  • Thumbnail size (number with units) — اندازه thumbnail ها. پیش‌فرض: 60px.

  • Padding (dimensions) — padding lightbox به پیکسل.

فیلدها (Fields)

  • Fields (repeater) — پیکربندی کنید کدام فیلدهای پست نمایش داده شوند. هر فیلد شامل:
  • Dynamic data (text) — تگ داده پویا (مثلاً {post_title:link}، {post_excerpt:20}).
  • HTML tag (select) — تگ HTML برای فیلد. گزینه‌ها: div، p، h1-h6. پیش‌فرض: div.
  • Width (number with units) — عرض فیلد.
  • Margin (spacing) — margin فیلد.
  • Padding (spacing) — padding فیلد.
  • Background color (color) — رنگ پس‌زمینه فیلد.
  • Border (border) — استایل border فیلد.
  • Typography (typography) — استایل متن فیلد.
  • Overlay (checkbox) — فیلد را به‌صورت overlay نمایش دهید.

محتوا (Content)

  • Alignment (select) — تراز محتوا. گزینه‌ها: top left، top center، top right، middle left، middle center، middle right، bottom left، bottom center، bottom right.

  • Min. height (number with units) — حداقل ارتفاع محتوا.

  • Margin (spacing) — margin wrapper محتوا.

  • Padding (spacing) — padding wrapper محتوا.

  • Background color (color) — رنگ پس‌زمینه wrapper محتوا.

overlay

  • Show on hover (checkbox) — overlay را فقط هنگام hover نمایش دهید.

  • Fade in animation (select) — انیمیشن overlay. گزینه‌ها: fade-in-up، fade-in-right، fade-in-down، fade-in-left، zoom-in، zoom-out.

  • Alignment (select) — تراز overlay. گزینه‌ها: top left، top center، top right، middle left، middle center، middle right، bottom left، bottom center، bottom right.

  • Margin (spacing) — margin overlay.

  • Padding (spacing) — padding overlay.

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

  • Inner background color (color) — رنگ پس‌زمینه داخلی overlay.

فلش‌های ناوبری (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.

فلش بعدی (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) — موقعیت چپ فلش بعدی.

نقاط (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 دور نقاط تکی. پیش‌فرض: 0px بالا، 5px راست، 0px پایین، 0px چپ.

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

برای JSON schema کامل به Carousel Schema مراجعه کنید.