CODEWITHSUNDEEP
reactjssliderbreakpointsswiper.js
Wildanzr
Wildanzr

Reputation: 1

How correct use swiperjs breakpoints with React jsx file?

Iam using swiperjs dependencies to create an amazing slider. But, I got an error while using one of API controller, which is breakpoints. I need this controller for customization the display. But, when I applied this, I got an error like this :v error screenshot

Here is my code :

<Swiper
    centeredSlides={true}
    grabCursor={true}
    pagination={{
        dynamicBullets: true,
    }}
    breakpoints: {
    // when window width is <= 1024px
        1024: {
            slidesPerView: 4,
            spaceBetweenSlides: 150
        },
        // when window width is <= 768px
        768: {
            slidesPerView: 3,
            spaceBetweenSlides: 200
        }
    }
    modules={[Pagination]}
    className="mySwiper"
>
    {events.map((event, idx) => {
      return (
        <SwiperSlide>
          <CardEvent
            image={event.img}
            info={event.info}
            title={event.name}
            icon={event.ico}
            color="bg-white"
          />
        </SwiperSlide>
      );
    })}
</Swiper>

Anybody can help me how to use breakpoints?

Upvotes: 0

Views: 1470

Answers (1)

Rahimuddin
Rahimuddin

Reputation: 614

breakPoints syntax is wrong. that's why you see that error. Try the below syntax. Refernce sandbox url

breakpoints = {{
        1024: {
            slidesPerView: 4,
            spaceBetweenSlides: 150
        },
        768: {
            slidesPerView: 3,
            spaceBetweenSlides: 200
        }
    }}

Upvotes: 1

Related Questions