Swiper.js slipsPerGroup 或 slipsPerView 未对奇数项进行分组

Question

我正在为客户构建的网站上使用 Swiper.js 作为滑块。他们的要求是这样的：滑块内有 10 个项目，一次会显示 4 个项目，每次单击箭头时，都会滑出 4 个项目，同时滑入 4 个新项目。所以如果我有幻灯片 1- 10，这就是滑块的行为方式：

第一次观看：1-4 张幻灯片 第二次观看：5-8 张幻灯片 第三视图：9、10、1、2 张幻灯片 第四个视图：3-6 张幻灯片......等等。

它是一个无限循环，并且总是一次滑动 4 个。我尝试使用 swiper.js 创建这样的滑块，并且非常接近，但还不够。这是我能够创建的内容：https://i.gyazo.com/3ef7e1d8f35b067bce961c853214150a.mp4

您会注意到，前两次单击效果很好，按预期进行，但是一旦视图中出现幻灯片 9、10、1 和 2，并且我单击“下一步”，它一次只会移动 2 张幻灯片，从而带来幻灯片 1 -4 可见。我需要避免这种情况发生，并确保它总是一次无限循环地移动 4 张幻灯片。这是我的代码：

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 4,
    spaceBetween: 10,
    slidesPerGroup: 4,
    loop: true,
    loopFillGroupWithBlank: false,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

提前致谢！ 干杯

Answer 1

您缺少循环设置：

loopFillGroupWithBlank: true,

Answer 2

下面是我的项目中使用slidesPerGroup={4}时使用的示例。

import SwiperCore, { Navigation, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/scss';
import 'swiper/scss/autoplay';
import 'swiper/scss/pagination';
import "swiper/scss/effect-coverflow";

SwiperCore.use([Navigation, Autoplay]);

const NewArrival = () => {
    return (
        <>
            <Swiper
                slidesPerView={4}
                slidesPerGroup={4}
                spaceBetween={15}
                loop={true}
                autoplay={{
                    delay: 5000,
                    pauseOnMouseEnter: true,
                    disableOnInteraction: false,
                    loopFillGroupWithBlank: false
                }}
                effect={"coverflow"}
                navigation={{
                    prevEl: ".custom_prev_n",
                    nextEl: ".custom_next_n",
                }}
                className="carausel-6-columns carausel-arrow-center"
            >

                {productImages && products.slice(-50).map((product, i) => (
                    <SwiperSlide key={i}>
                        <SingleProduct product={product} productImages={productImages} />
                    </SwiperSlide>
                ))}

            </Swiper>

            <div
                className="slider-arrow slider-arrow-2 carausel-6-columns-arrow"
                id="carausel-6-columns-2-arrows"
            >
                <span className="slider-btn slider-prev slick-arrow custom_prev_n">
                    <i className="fi-rs-angle-left"></i>
                </span>
                <span className="slider-btn slider-next slick-arrow custom_next_n">
                    <i className="fi-rs-angle-right"></i>
                </span>
            </div>
        </>
    );
};

export default NewArrival;