راهنمای استفاده از MainCarousel

کامپوننت MainCarousel یک اسلایدر حرفه‌ای و زیبا برای نمایش محتوای شما در صفحه اصلی وب‌سایت است.

✨ ویژگی‌های کلیدی:

انیمیشن‌های روان و زیبا با Framer Motion
افکت Fade (محو شدن) بین اسلایدها
اسلایدر خودکار (Autoplay)
دکمه‌های ناوبری سفارشی با پیش‌نمایش تصویر
کاملاً ریسپانسیو و موبایل‌محور
پشتیبانی کامل از زبان فارسی (RTL)

مرحله 1: نصب پکیج‌های مورد نیاز

ابتدا باید پکیج‌های زیر را نصب کنید:

npm install swiper framer-motion react-icons

⚠️ توجه: این کامپوننت برای Next.js طراحی شده است. اگر از Vite استفاده می‌کنید، ممکن است با مشکلاتی در import کردن CSS مواجه شوید.

مرحله 2: افزودن استایل‌های سفارشی

این کدها را به فایل src/app/globals.css اضافه کنید:

.main-prev {
  width: unset !important;
  height: unset !important;
  margin-top: -80px !important;
  left: 0px !important;
  z-index: 20;
}

.main-next {
  width: unset !important;
  height: unset !important;
  margin-top: -80px !important;
  right: 0 !important;
  z-index: 20;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  display: none !important;
}

.next_icon {
  width: 25px !important;
  height: 25px !important;
}

مرحله 3: استفاده در صفحه

import MainCarousel from "@/components/MainCarousel";

export default function Home() {
  return (
    <main>
      <MainCarousel />
    </main>
  );
}

تنظیمات و سفارشی‌سازی

تغییر اسلایدها

برای تغییر اسلایدها، آرایه mockSlides را ویرایش کنید:

const mockSlides = [
  {
    id: 1,
    text: "متن اسلاید اول شما",
    link: "/لینک-مورد-نظر",
    full_path: "آدرس-تصویر.jpg",
  },
];

مشخصات هر اسلاید

فیلد	نوع	توضیحات
`id`	number	شناسه یکتا برای هر اسلاید
`text`	string	متن نمایشی اسلاید
`link`	string	لینک دکمه اسلاید
`full_path`	string	آدرس تصویر اسلاید

تنظیمات Autoplay

برای تغییر سرعت اسلایدر خودکار:

autoplay={{
  delay: 4000,  // 4 ثانیه
  disableOnInteraction: false,
}}

رفع مشکلات رایج

مشکل: استایل‌ها اعمال نمی‌شوند

مطمئن شوید CSS سفارشی را به globals.css اضافه کرده‌اید
سرور را ری‌استارت کنید
کش مرورگر را پاک کنید

✅ موفق باشید!
با استفاده از این کامپوننت، می‌توانید یک اسلایدر حرفه‌ای و زیبا در وب‌سایت خود ایجاد کنید.

کاروسل با پیش نمایش اسلاید های قبل و بعد

کاروسل با پیش نمایش اسلاید های قبل و بعد