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

Question

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?

Ophir

Could you at least put some of the code that you used so far in your question, or make code sandbox with it, so that we can see what have you tried so far? – Lymphocytosis

Answer 1

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>

Ophir