SwiperJS/CSS - 根据屏幕大小动态更改每个视图的幻灯片

Question

我将 SwiperJS 与 React 结合使用，我正在尝试实现一种布局，其中一张幻灯片始终位于屏幕中央，下一张幻灯片的一部分会填满剩余的部分 space向右。

Swiper Documentation 显示我可以在每个断点指定幻灯片的数量，但我正在努力让下一张图像填充我设置 slidesPerView 的那些断点之间剩余的 space .

我该如何着手实施它？

Answer 1

我通过使 swiper 容器的宽度比页面宽并在父容器上设置 overflow-x:hidden 来处理它

<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>

SwiperJS/CSS - 根据屏幕大小动态更改每个视图的幻灯片

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

css

swiper

swiperjs

react-swiper