Carousel.jsx

import { useState } from "react";
import styled from "styled-components";
import { useSpringCarousel } from "react-spring-carousel-js";

import CarouselItem from "./CarouselItem";
import ArrowButton from "./ArrowButton";
import { S as StyledArrowButton } from "./ArrowButton";

const S = {};
S.Carousel = styled.div`
  display: flex;
  position: relative;

  width: 100%;
  height: 200px;

  &:hover ${StyledArrowButton.ArrowButton} {
    opacity: 1;
  }
`;

const Carousel = ({ items }) => {
  const [isFirst, setFirst] = useState(true);
  const [isLast, setLast] = useState(false);

  const {
    carouselFragment,
    slideToNextItem,
    slideToPrevItem,
    useListenToCustomEvent
  } = useSpringCarousel({
    items: items.map((item, index) => ({
      id: index,
      renderItem: (
        <CarouselItem>
          <img src={item} />
        </CarouselItem>
      )
    }))
  });

  useListenToCustomEvent("onSlideChange", (data) => {
    setFirst(data.currentItem === 0);
    setLast(data.currentItem === items.length - 1);
  });

  return (
    <S.Carousel>
      <ArrowButton type="prev" isVisible={!isFirst} onClick={slideToPrevItem} />
      {carouselFragment}
      <ArrowButton type="next" isVisible={!isLast} onClick={slideToNextItem} />
    </S.Carousel>
  );
};

export default Carousel;