jQuery轮播图滑动到最后一张时点击prev返回第一张的实现问题

优化点说明 #

首先建议先修改CSS中.container的溢出属性，避免轮播滑动时出现横向滚动条：

.container {
  overflow-x: hidden; /* 把原来的auto改成hidden */
  width: 100vw;
  height: 100vh;
}

实现思路 #

1. 先定义核心参数：单张幻灯片宽度、一屏可展示的幻灯片数量、总幻灯片数、最大可偏移量，以及当前偏移量变量
2. 点击next按钮时先做边界判断，避免滑动超出最后一张的位置
3. 点击prev按钮时优先判断是否已滑动到最后一张，符合条件直接回到初始位置，否则做普通的边界判断后向前滑动一张

完整修改后的JS代码 #

var carousel = $('.carousel');
const slideWidth = 25; // 单张幻灯片宽度，单位vw
const perView = 4; // 一屏可展示的幻灯片数量，等于100vw / 单张宽度
const totalSlides = $('.slide').length;
const maxOffset = (totalSlides - perView) * slideWidth; // 最大左偏移量，单位vw
let currentOffset = 0; // 当前左偏移值，单位vw

$('.next').on('click', function() {
    // 已经滑动到最后，禁止继续滑动
    if (currentOffset >= maxOffset) return;
    currentOffset += slideWidth;
    carousel.animate({
        left: `-${currentOffset}vw`
    }, 500);
});

$('.prev').on('click', function() {
    // 已经滑动到最后一张时，点击prev直接回到第一张
    if (currentOffset === maxOffset) {
        currentOffset = 0;
        carousel.animate({
            left: 0
        }, 500);
        return;
    }
    // 普通场景下的边界判断，避免滑动到最左侧后继续滑动
    if (currentOffset <= 0) return;
    currentOffset -= slideWidth;
    carousel.animate({
        left: `-${currentOffset}vw`
    }, 500);
});

逻辑说明 #

• 总共有6张幻灯片，一屏展示4张，所以最多可以向右滑动2次，偏移到50vw的位置即到达最后一张
• 当处于最后一张位置（偏移量为50vw）时，点击prev按钮直接将偏移量重置为0，回到初始的第一张位置
• 其他场景下prev和next按钮都有边界保护，不会出现滑动超出轮播范围的问题

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