Как заставить работать кастомную навигацию Swiper в React?

Question

[Дмитрий Путилов]

Подключил Swiper к моему проекту на React.
Хочу сделать навигацию, но почему-то не срабатывает, но если делать string значением, написать класс, то работает, как это можно пофиксить?

import React, {useRef} from 'react';
import {Swiper, SwiperSlide} from "swiper/react";
import Image from "../../../../UI/Image";
import product_bitrix from "../../../../image/mainPage/itProducts/bitrix.png";
import product_amo from "../../../../image/mainPage/itProducts/amoCRM.png";
import arrow from '../../../../image/icon/arrow.png'
import {Navigation} from "swiper";


const SliderProducts = () => {

    const prevRef = useRef(null)

    return (
        <div className={'flex items-center'}>
            <div ref={prevRef} className={'w-16 invert rotate-180 cursor-pointer'}>
                <Image image={arrow} />
            </div>

            <Swiper
                slidesPerView={2}
                spaceBetween={40}
                modules={[Navigation]}
                style={{
                    margin: '0 3rem'
                }}
                navigation={{
                    nextEl: prevRef.current
                }}
            >
                <SwiperSlide>
                    <div className={'flex items-center'}>
                        <div className={'w-[20%]'}>
                            <Image image={product_bitrix} />
                        </div>
                        <div className={'text-xl ml-4 w-[80%]'}>Профессиональная система для управления сайтами и интернет магазинами</div>
                    </div>
                </SwiperSlide>

                <SwiperSlide>
                    <div className={'flex items-center'}>
                        <div className={'w-[20%]'}>
                            <Image image={product_amo} />
                        </div>
                        <div className={'text-xl ml-4 w-[80%]'}>Продвинутая система аналитики для руководителей
                        </div>
                    </div>
                </SwiperSlide>

                <SwiperSlide>
                    <div className={'flex items-center'}>
                        <div className={'w-[20%]'}>
                            <Image image={product_amo} />
                        </div>
                        <div className={'text-xl ml-4 w-[80%]'}>Продвинутая система аналитики для руководителей
                        </div>
                    </div>
                </SwiperSlide>
            </Swiper>

            <div className={'w-16 invert next'}>
                <Image image={arrow} />
            </div>
        </div>
    );
};

export default SliderProducts;

Answer 1

[0xD34F]

nextEl: prevRef.current

Суть проблемы - current имеет значение null при первом рендеринге. Так что придётся заставить компонент отрендериться ещё раз. Например, можно это сделать путём сохранения ссылки на экземпляр swiper'а в стейт (да, с одной стороны костыль, с другой - наверняка пригодится в будущем):

const [ swiper, setSwiper ] = useState();

<Swiper
  onSwiper={setSwiper}
  ...

https://codesandbox.io/s/for-https-qna-habr-com-q-...

Или, так же получаете экземпляр swiper'а, но вырезаете к чёрту navigation, вместо того, чтобы передавать ref'ы в экземпляр компонента Swiper, добавьте элементам, которые должны выступать в роли кнопок, обработчики клика, где будут дёргаться методы slidePrev/slideNext:

- ref={prevRef}
+ onClick={() => swiper.slidePrev()}

https://stackblitz.com/edit/stackblitz-starters-rr...

Comments

[Дмитрий Путилов]

Немного не разобрался, вот мы создали стейт, после вызвали функцию onSwiper, а что передавать setSwiper ?

[0xD34F]

мы <...> вызвали функцию onSwiper

Дмитрий Путилов, это где? Не надо нести чушь, onSwiper вызываете не вы и не я, а компонент Swiper.