Untitled

const ImageSlider = ({ data }) => {
  const [slideIndex, setSlideIndex] = useState(0);

  return (
    <Container type="content" className={styles.component}>
      <div className={styles.navigation}>
        <div className={styles.current_slide}>
          {slideIndex} Of {data.slides.length}
        </div>
      </div>
      <div className="swiper-image-slider component">
        <Swiper
          modules={[Navigation]}
          slidesPerView={"auto"}
          onActiveIndexChange={(swiperCore) => {
            setSlideIndex(swiperCore.activeIndex);
          }}
          navigation={{
            prevEl: ".swiper-image-button-prev",
            nextEl: ".swiper-image-button-next",
          }}
        >
          {data &&
            data.slides?.map((slide, index) => (
              <SwiperSlide>
                <div className={styles.component_slide} key={index}>
                  <SwiperCard
                    image={slide.image}
                    type={slide.image.type}
                    canHover={slide.image.hover}
                    body={
                      <StandardCardBody
                        tag={slide.body.category}
                        title={slide.body.title}
                        description={slide.body.author}
                      />
                    }
                  />
                </div>
              </SwiperSlide>
            ))}
          <div className="swiper-image-button-prev" />
          <div className="swiper-image-button-next" />
        </Swiper>
      </div>
    </Container>
  );
};

export default ImageSlider;