If there are a total of 3 slide images, can't I adjust the scale and opacity of only the images on both sides?

[brgndyy]

Looking at other issues classname-of-carousel-item:not(.classname-of-active-item)

It is said that css was manipulated in this way, and css can be fed to each item in the document,

If you look at the code, each item does not exist because it is being sprinkled with the map function. How can I feed the opacity and scale properties only to the side items?

export default function SliderImage() {
  const [data, setData] = useState<ImageData[]>();

  const fetchData = async () => {
    const res = await fetch(`https://picsum.photos/v2/list?limit=4`);
    const data = await res.json();
    setData(data);
  };

  useEffect(() => {
    fetchData();
  }, []);

  useEffect(() => {
    console.log(data);
  }, [data]); 

  return (
    <>
      {data ? (
        <Carousel
          responsive={responsive}
          infinite={true}
          autoPlay={true}
          autoPlaySpeed={3000}
          customTransition="all 0.5s"
          transitionDuration={500}
          containerClass="carousel-container"
          dotListClass="custom-dot-list-style"
          itemClass="carousel-item-padding-40-px"
          arrows={false}
        >
          {data.map((item) => {
            return (
              <div key={item.id} className={classes.carousel_item}>
                <Image
                  src={item.download_url}
                  width={300}
                  height={500}
                  alt="image"
                />
              </div>
            );
          })}
        </Carousel>
      ) : (
        <p>Loading...</p>
      )}
    </>
  );
}

[brgndyy]

please help me😭😭😭😭😭😭

[WesleyMcGhee1]

What you might have to do is create a seprate class that take the image and then detects if it's the current index or not.

So it could be something like this.

const [index, setIndex] = useState(0);

const handleCarouselChange = (nextSlide, currentSlide) => {
  const isNext = nextSlide > currentSlide;

  if (isNext && index === data.length - 1) {
    setIndex(0)
  } else if (!isNext && Index === 0) {
    setIndex(data.length - 1);
  } else {
    isNext ?
      ? setIndex(index + 1)
      : setIndex(index - 1);
  }
}

<Carousel beforeChange={(nextSlide, { currentSlide }) => {
  handleCarouselChange(nextSlide, currentSlide);
}}>
  {data.map((item, idx) => {
      <Image 
        src={item.download_url}
        width={300}
        height={500}
        alt="image"
       className={ idx === index ? "activeImage" : "inactiveImage"}
      />
  })}
</Carousel>

I haven't tested this but just a proposed solution.