0

Я сделал для своего слайдера кастомные стрелки, которые по сути представляют собой 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>
  );
})

1 ответ 1

0

Попробуйте как в документации указано в самом простом случае без дополнительных атрибутов типа 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>
  );
}

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.