how to target the slide right after the slide which has property of 'next slide' in swiper in react

Question

I have this component which in turn renders some card component inside SwiperSlide wrapper component. I know how to target next slide inside swiper in my css file.this is the selector:

:global(.swiper-slide-next){ //some styles }

the problem is How could I target the slide which is right after the one I target with this selector. I just want to select these two slides and apply some css styles on them.

here is my code :

`

export interface SliderProps extends Omit<HTMLProps<HTMLLabelElement>, "label"> {}

const Slider: React.FC<SliderProps> = ({ ...props }) => {
  const thisswiper = useSwiper();
  return (
    <Box sx={{position: 'relative'}}>
      <Swiper
        // install Swiper modules
        initialSlide={1}
        className={styles.slider}
        modules={[Navigation]}
        navigation
        onSwiper={(swiper) => console.log(swiper)}
        onSlideChange={() => console.log("slide change")}
        breakpoints={{
          640: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          768: {
            slidesPerView: 2,
            spaceBetween: 40,
          },
          1024: {
            slidesPerView: 4,
            spaceBetween: 10,
          },
        }}
      >
        <SwiperSlide>
          <Card />
        </SwiperSlide>
        <SwiperSlide>
          <Card />
        </SwiperSlide>
        <SwiperSlide>
          <Card />
        </SwiperSlide>
        <SwiperSlide>
          <Card />
        </SwiperSlide>
        <SwiperSlide>
          <Card />
        </SwiperSlide>
        <SwiperSlide>
          <Card />
        </SwiperSlide>
        <SwiperSlide>
          <Card />
        </SwiperSlide>
      </Swiper>
    </Box>
  );
};

export default Slider;

`

I tried some api's in document of swiper.