M
M
Mad Coder2021-02-02 23:42:42
React
Mad Coder, 2021-02-02 23:42:42

Why is pagination not working in react-id-swiper?

I connect the react-id-swiper component

import Swiper from 'react-id-swiper';
import 'swiper/swiper.min.css';

 const params = {
        spaceBetween: 24,
        freeMode: true,
        slidesPerView: 'auto',
        pagination: {
            el: '.swiper-pagination',
            clickable: true
        },
        breakpoints: {
            600: {
                spaceBetween: 24,
                freeMode: true,
                slidesPerView: 'auto',
            },
            320: {
                freeMode: false,
                slidesPerView: 1,
                spaceBetween: 0,
            }
        }
    };

<Swiper {...params}>
                    {
                        imageArrSmall.current.map((item, ind) => (
                            <div
                                className={classes.blockCompetition}
                                key={ind}
                                onClick={() => {
                                    openLightboxOnSlide(ind+1)
                                }}
                            >
                                <BlockCompetition
                                    imgSrc={item}
                                />
                            </div>
                        ))
                    }
</Swiper>

Everything would be great, but it is not visible and, accordingly, pagination does not work.
Versions: "swiper": "^6.4.10", "react-id-swiper": "^4.0.0",

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question