1

hy, Im using swiper.js library in react js I have spacebetween value is 100, now for breakpoint 600 I want spacebetween 30, how is it possible, how can I use breakpoints

type here

<Swiper
      effect={"coverflow"}
      grabCursor={true}
      centeredSlides={true}
      slidesPerView={3}
      loop={true}
      pagination={false}
      modules={[EffectCoverflow, Pagination]}
      className="mySwiper d-"
      initialSlide={2}
      spaceBetween={100}
      autoplay={true}
      coverflowEffect={{
        rotate: 0,
        stretch: 5,
        depth: 24,
        modifier: 20,
        slideShadows: false,
      }}
    >
      <SwiperSlide>
        <div className="d-flex justify-content-center">
          1
          <img src="\assets\images\feature\feature1.png" alt="" />
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div className="d-flex justify-content-center">
          2
          <img src="\assets\images\feature\feature2.png" alt="" />
        </div>
      </SwiperSlide>
      <SwiperSlide>
        <div className="d-flex justify-content-center">
          3
          <img src="\assets\images\feature\feature3.png" alt="" />
        </div>
      </SwiperSlide>
          </Swiper>
Muhammad Tehsin
  • 57
  • 3

1 Answers1

0

You have to set breakpoints in your jsx/tsx file.

<Swiper
  {...props}
  breakpoints={{
    // when window width is >= 600px
    600: {
      spaceBetween: 20,
    },
  }}
>
  {slides}
</Swiper>
Doğukan Göker
  • 1
  • 1