图片轮播显示4张图片时滚动失效的技术求助

问题描述 #

开发的图片轮播组件包含8张图片，预期每次显示4张，点击按钮实现左右滚动。但设置图片宽度适配4张显示时滚动功能完全失效；设置显示2张（图片被拉伸）时滚动功能正常。

问题根源 #

1. CSS属性冲突：.carousel-item同时设置了flex: 0 0 25%（预期占容器25%宽度）和max-width: 12.5%，后者强制限制宽度为容器的12.5%，导致8张图片刚好占满容器，无滚动空间。
2. 滚动容器配置错误：.carousel-wrapper设置了overflow: hidden，导致内部内容无法横向滚动，scrollLeft属性无法生效。
3. JS与CSS重复定义宽度：JS手动计算并设置item宽度，与CSS的flex布局规则冲突，造成宽度计算混乱。

解决方案 #

修改后的CSS代码 #

.carousel-container {
    width: 90%;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.carousel-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    /* 移除overflow:hidden，允许横向滚动 */
}

.carousel-item {
    flex: 0 0 25%; /* 每个item占容器25%宽度，4个刚好填满显示区域 */
    box-sizing: border-box;
    overflow: hidden;
    height: 100%;
    /* 移除max-width:12.5%，消除宽度限制冲突 */
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
.prev-btn {
    left: 0;
  }
.next-btn {
    right: 0;
  }
.carousel-btn:hover {
    background-color: #87CEEB;
  }

修改后的JavaScript代码 #

document.addEventListener("DOMContentLoaded", function () {
    console.log("Script loaded!");

    const carouselWrapper = document.querySelector('.carousel-wrapper');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    // 基于容器宽度计算单组图片的滚动步长
    const scrollStep = carouselWrapper.clientWidth / 4;

    function scrollCarousel(direction) {
        const scrollAmount = scrollStep * direction;
        carouselWrapper.scrollLeft += scrollAmount;

        // 循环滚动逻辑
        if (direction === 1 && carouselWrapper.scrollLeft + carouselWrapper.clientWidth >= carouselWrapper.scrollWidth) {
            carouselWrapper.scrollLeft = 0;
        } else if (direction === -1 && carouselWrapper.scrollLeft <= 0) {
            carouselWrapper.scrollLeft = carouselWrapper.scrollWidth - carouselWrapper.clientWidth;
        }
    }

    prevBtn.addEventListener('click', function () {
        console.log("Previous button clicked");
        scrollCarousel(-1);
    });

    nextBtn.addEventListener('click', function () {
        console.log("Next button clicked");
        scrollCarousel(1);
    });
});

修改说明 #

1. CSS调整：
   • 移除.carousel-wrapper的overflow:hidden，确保内部内容可横向滚动，让scrollLeft属性正常生效。
   • 删除.carousel-item的max-width:12.5%，保留flex:0 0 25%保证每个item占容器1/4宽度，4个刚好填满显示区域。
2. JS调整：
   • 删除手动设置item和wrapper宽度的代码，依赖CSS flex布局自动计算宽度，避免规则冲突。
   • 直接基于容器宽度计算滚动步长，确保每次滚动刚好切换一组4张图片。

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