آموزش ویجت کاروسل حلقه Loop Carousel در المنتور (ویدیوی آموزشی)

آموزش ویجت کاروسل حلقه Loop Carousel در المنتور

Loop Carousel یک ابزار قدرتمند و جذاب در المنتور است که عملکردی مشابه ویجت حلقه شبکه‌ ای (Loop Grid) در المنتور دارد، اما به جای حرکت عمودی (بالا و پایین)، آیتم‌ها را به صورت افقی (چپ و راست) نمایش می‌دهد. این ویجت برای نمایش محتوای تکرارشونده مانند نوشته‌ها، محصولات یا نمونه‌ کارها به شکل اسلایدر طراحی شده است.

تفاوت‌های Loop Carousel با Loop Grid

همان‌طور که اشاره شد، Loop Carousel به صورت افقی حرکت می‌کند، بنابراین تنظیمات و کنترل‌های مخصوص به خود را دارد که در ادامه به آن‌ها می‌پردازیم.

همچنین ببینید: آموزش ساخت اسلایدر کاروسل پیشرفته با المنتور

تنظیمات بخش محتوا در کاروسل حلقه

۱. تنظیمات طرح بندی

• انتخاب قالب (Template):
  ابتدا یک قالب طراحی کنید یا از قالب‌های آماده استفاده کنید. از منوی کشویی قالب مورد نظر را انتخاب کنید و در صورت نیاز با کلیک بر روی “ویرایش قالب”، آن را ویرایش کنید.
• تعداد آیتم‌ها (Number of Slides):
  تعداد آیتم‌هایی که در حلقه نمایش داده می‌شوند را مشخص کنید.
• تعداد نمایش در هر بار (Slides to Display):
  تعداد آیتم‌هایی که همزمان در صفحه قابل مشاهده هستند.
• تعداد اسلایدها در هر حرکت (Slides on Scroll):
  تعداد اسلایدهایی که با هر کلیک روی دکمه‌های ناوبری جابجا می‌شوند.
• ارتفاع یکسان (Equal Height):
  این گزینه به شما کمک می‌کند تا ارتفاع تمام آیتم‌ها یکسان باشد و طراحی شما مرتب‌تر به نظر برسد.

۲. تنظیمات کوئری

کوئری مشخص می‌کند که چه آیتم‌هایی در کاروسل حلقه نمایش داده شوند.

• منبع (Source):
  آیتم‌های حلقه می‌توانند از منابع مختلفی مانند نوشته‌ها، برگه‌ها، محصولات یا حتی انتخاب دستی تأمین شوند.
• تاریخ (Date):
  می‌توانید نمایش آیتم‌ها را به بازه‌های زمانی خاصی محدود کنید، مثل نوشته‌های هفته گذشته یا سال جاری.
• ترتیب (Order):
  ترتیب نمایش آیتم‌ها را بر اساس تاریخ، عنوان، تعداد نظرات و موارد دیگر مشخص کنید.
• نحوه مرتب‌سازی (Order By):
  آیتم‌ها را به صورت صعودی یا نزولی مرتب کنید.

۳. تنظیمات Settings

• پخش خودکار (Autoplay):
  تعیین کنید که اسلایدر به‌صورت خودکار حرکت کند یا فقط با کلیک کاربر جابجا شود.
• سرعت حرکت (Scroll Speed):
  سرعت حرکت آیتم‌ها هنگام پخش خودکار را بر حسب میلی‌ثانیه تنظیم کنید.
• اسکرول بی‌نهایت (Infinite Scroll):
  این گزینه امکان حرکت مداوم حلقه را فراهم می‌کند.
• جهت حرکت (Direction):
  جهت حرکت آیتم‌ها را از چپ به راست یا راست به چپ تنظیم کنید.

۴. تنظیمات Navigation (ناوبری)

• آیکون‌های ناوبری (Arrows):
  فعال یا غیرفعال کردن دکمه‌های فلش برای حرکت به اسلاید قبلی یا بعدی.
• شخصی‌سازی آیکون‌ها:
  می‌توانید از آیکون‌های موجود در کتابخانه یا فایل‌های SVG دلخواه استفاده کنید.
• موقعیت (Position):
  مکان دکمه‌های ناوبری را درون یا بیرون اسلایدر تنظیم کنید.

۵. تنظیمات Pagination (صفحه‌بندی)

صفحه‌بندی به کاربران کمک می‌کند تا بدانند در کدام بخش از حلقه قرار دارند.

• انواع صفحه‌بندی:
  • نقاط (Dots): نقاطی که هر کدام نشان‌دهنده یک صفحه هستند.
  • اعداد (Fractions): عددی که نشان‌دهنده موقعیت کاربر در حلقه است.
  • نوار پیشرفت (Progress Bar): نواری که پیشرفت کاربر را نشان می‌دهد.

تنظیمات بخش استایل در Loop Carousel

۱. طرح بندی

فاصله بین آیتم‌های حلقه را تنظیم کنید تا ظاهر مرتب‌تری داشته باشید.

۲. ناوبری

اندازه و رنگ آیکون‌های ناوبری را تنظیم کرده و مشخص کنید که در حالت عادی یا هاور (Hover) چگونه نمایش داده شوند.

۳. صفحه بندی

ظاهر نقاط، اعداد یا نوار پیشرفت را سفارشی کنید و موقعیت آن‌ها را درون یا بیرون اسلایدر تنظیم کنید.

نتیجه‌گیری

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