Swiper JS分页异常：点击非相邻Bullets跳转无过渡动画

问题分析 #

你遇到的问题源于**loop: true + 少量slide（仅3个） + slidesPerView > 1**的组合冲突：开启循环模式时，Swiper会克隆首尾slide实现无缝滚动，但当总slide数量不多于slidesPerView的2倍时，点击第三个bullet（对应最后一个原始slide），Swiper会直接跳转到克隆的前置slide，跳过过渡动画；而拖拽滑动时滚动逻辑是连续的，因此不会出现异常。

解决方案 #

以下是几种可行的解决方式，按需选择：

方案1：关闭循环模式 #

如果不需要无缝循环滚动，直接将loop设为false，这是最直接的解决办法：

const swiper2 = new Swiper(".swiper2", {
    loop: false, // 关闭循环
    direction: 'horizontal',
    setWrapperSize: true,
    slideNextClass: "swiper2-next-slide",
    slidePrevClass: "swiper2-prev-slide",
    centeredSlides: false,
    breakpoints: {
        0: {
            slidesPerView: 1.5,
        },
        480: {
            slidesPerView: 1.9,
        },
    },
    pagination: {
        el: ".swiper-pagination2",
        clickable: true,
    },
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    speed: 300,
});

方案2：保留循环，增加克隆slide数量 #

若必须保留loop模式，添加loopAdditionalSlides参数，强制Swiper克隆更多slide，确保过渡动画正常触发：

const swiper2 = new Swiper(".swiper2", {
    loop: true,
    loopAdditionalSlides: 2, // 额外克隆2个slide，补充循环逻辑的slide基数
    direction: 'horizontal',
    setWrapperSize: true,
    slideNextClass: "swiper2-next-slide",
    slidePrevClass: "swiper2-prev-slide",
    centeredSlides: false,
    breakpoints: {
        0: {
            slidesPerView: 1.5,
        },
        480: {
            slidesPerView: 1.9,
        },
    },
    pagination: {
        el: ".swiper-pagination2",
        clickable: true,
    },
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    speed: 300,
});

方案3：调整slidesPerView为1 #

如果允许单slide显示，将slidesPerView设为1，循环模式下的分页点击会正常触发过渡动画：

const swiper2 = new Swiper(".swiper2", {
    loop: true,
    direction: 'horizontal',
    setWrapperSize: true,
    slideNextClass: "swiper2-next-slide",
    slidePrevClass: "swiper2-prev-slide",
    centeredSlides: false,
    breakpoints: {
        0: {
            slidesPerView: 1, // 改为单slide显示
        },
        480: {
            slidesPerView: 1,
        },
    },
    pagination: {
        el: ".swiper-pagination2",
        clickable: true,
    },
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    speed: 300,
});

补充提示 #

你代码中的选择器存在错误："\.swiper2"应改为".swiper2"（不需要转义点号），否则Swiper可能无法正确初始化容器。

内容的提问来源于stack exchange，提问作者Natig Agharzayev