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

【问题标题】：SwiperJS/CSS - Dynamically changing slides per view based on screen sizeSwiperJS/CSS - 根据屏幕大小动态更改每个视图的幻灯片
【发布时间】：2022-01-20 11:08:01
【问题描述】：

我正在使用带有 React 的 SwiperJS，并且我正在尝试实现一个布局，其中一张幻灯片始终位于屏幕的中心，而下一张幻灯片的一部分会填满右侧的任何剩余空间。

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

我该如何实施？

【问题讨论】：

您能否至少将您目前使用的一些代码放在您的问题中，或者用它制作代码沙箱，以便我们可以看到您到目前为止尝试了什么？

标签： css swiper swiperjs react-swiper

【解决方案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>

【讨论】：