SwiperJS/CSS - Dynamically changing slides per view based on screen size

user_9613252 0
Viewed 2068

I'm using SwiperJS with React, and I'm trying to implement a layout where one slide is always positioned at the center of the screen, and a portion of the next slide fills up any remaining space to the right.

The Swiper Documentation shows I can specify the number of slides at each breakpoint, but I'm struggling with making the next image fill up the remaining space between those breakpoints where I set the slidesPerView.

How can I go about implementing this?

react-swiper swiper.js css
1 Answers

I handled it by making the swiper container's width wider than the page and setting overflow-x:hidden on the parent container

<section className={`overflow-x-hidden`}>
  <div className="css-to-set-swiper-container-width">
         <Swiper
              onBeforeInit={(swiper) => {
                swiper.params.navigation.prevEl = prevRef.current;
                swiper.params.navigation.nextEl = nextRef.current;
              }}
              navigation={{ nextEl: nextRef.current, prevEl: prevRef.current }}
              breakpoints={{
                640: { slidesPerView: 2},
              }}
              slidesPerView={1.5}
              spaceBetween={10}
              loop={true}

            >
              {data.map((item, idx) => {
                return (
                  <SwiperSlide>
                     <CardComponent content={item} />
                  </SwiperSlide>
                );
              })}
            </Swiper>
    </div>
 </section>
user_96132520
Related