How to use

import { Carousel_001 } from "@/components/v1/skiper47";

// 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_001
      images={images}
      showPagination={true}
      showNavigation={true}
      loop={true}
      autoplay={true}
      spaceBetween={40}
    />
  );
};

Customization

The carousel uses Swiper.js with the coverflow effect. You can customize the 3D effect by modifying the coverflowEffect object

{{
  rotate: 0, // Rotation angle
  slideShadows: false, // Enable/disable slide shadows
  stretch: 0, // Stretch effect
  depth: 100, // Depth of the 3D effect
  modifier: 2.5, // Effect modifier
}}

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