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

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

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

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

npm install swiper framer-motion react-icons

مرحله 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",
  },
];

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

تنظیمات Autoplay

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

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

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