React Swiper: не работают стрелки влево-вправо

Question

Я сделал для своего слайдера кастомные стрелки, которые по сути представляют собой buttons с img внутри. Задача - сделать так, чтобы при нажатии на стрелку совершилась прокрутка списка карточек вправо-влево. Но при инициации react-компонента стрелки не работают. Причем если совершить хотя бы один клик по одной из карточек, то стрелки вдруг начинают работать.

Я использовал хук useSwiper(), а в самой кнопке на клике вызываю метод swiper.slideNext(). Но если посмотреть в console.log, то вместо swiper приходит null.

const StepDesignPanel: React.FC = observer(() => {
  const {stepCollection, stepDesignId, setDesignId, currentGarment} = store;
  const prevRef = useRef(null);
  const nextRef = useRef(null);
  const swiper = useSwiper();

  const designsData = (): IDesign[] => {
    return getDesigns(stepCollection[currentGarment], currentGarment);
  }

  return (
    <WrappedStepDesignPanel>
      <Swiper
        modules={[Navigation]}
        spaceBetween={16}
        slidesPerView={6}
        navigation={{
          prevEl: prevRef.current,
          nextEl: nextRef.current,
        }}
        onSwiper={(swiper) => console.log(swiper)}
        onSlideChange={() => console.log('slide change')}
      >
        {
          designsData().map((item, index) => <SwiperSlide key={index}>
            <CardModel 
              isSelected={item.id === stepDesignId}
              imgPath={item.imgPath} 
              header={item.name} 
              handleClick={() => setDesignId(item.id)}
            />
            </SwiperSlide>)
        }
      </Swiper>

      <button 
        className='arrow arrow--left' 
        ref={prevRef}
        onClick={() => swiper.slidePrev()}
      >
        <img src={arrowLeft} alt='left'/>
      </button>
      
      <button 
        className='arrow arrow--right' 
        ref={nextRef}
        onClick={() => {
          console.log(swiper) // приходит null
          swiper.slideNext()
        }}
      >
        <img src={arrowRight} alt='right'/>
      </button>

    </WrappedStepDesignPanel>
  );
})

Answer 1

Попробуйте как в документации указано в самом простом случае без дополнительных атрибутов типа ref

// some-inner-component.jsx
import { React } from 'react';
import { useSwiper } from 'swiper/react';

export default function SlideNextButton() {
  const swiper = useSwiper();

  return (
    <button onClick={() => swiper.slideNext()}>Slide to the next slide</button>
  );
}

БЛОГ НА HUSL

React Swiper: не работают стрелки влево-вправо

Ответы (1 шт):