How to use

import { Carousel_005 } from "@/components/v1/skiper51";

// Using the carousel component with custom images
const CustomCarousel = () => {
  const images = [
    {
      src: "/path/to/image1.jpg",
      alt: "Description 1",
    },
    {
      src: "/path/to/image2.jpg",
      alt: "Description 2",
    },
    // ... more images
  ];

  return (
    <Carousel_005
      images={images}
      showPagination={true}
      showNavigation={true}
      loop={true}
      autoplay={true}
      spaceBetween={0}
    />
  );
};

Customization

The carousel uses Swiper.js with the creative effect. You can customize the creative effect by modifying the creativeEffect object

{{
  prev: {
    shadow: true,
    translate: [0, 0, -400],
  },
  next: {
    translate: ["100%", 0, 0],
  },
}}

style Customization

• Well most of the style you can customize inline.
• But some style you have to do it with css classes.
• Find out the style name from dev tools.
• Access it with you className.

<Swiper className="Carousal_001" />

.Carousal_001 {
  padding-bottom: 50px !important;
}

.Carousal_001 .swiper-slide {
  border: 1px solid red;
}

.Carousal_001 .swiper-pagination {
  color: red;
}

.Carousal_001 .swiper-pagination-bullet-active {
  background: red;
}

Attribution

• Illustrations by AarzooAly
• Carousel by Swiper.js