How to use

import { Carousel_002 } from "@/components/v1/skiper48";

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

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