移动端非响应式Carousel问题求助（原生CSS/HTML/JS）

我用原生CSS、HTML和JavaScript开发了一个图片轮播组件，通过transform: translateX结合JS实现切换，但在小屏幕设备上出现图片重叠、显示位置异常的问题。

问题根源 #

轮播容器和图片使用了固定宽度（500px），且JS中硬编码了500px作为位移计算的基准值。当屏幕宽度小于500px时，图片会被压缩，但JS仍按500px计算位移，导致轮播位置偏移，出现图片重叠。

修正方案 #

1. 响应式CSS调整 #

将固定宽度改为相对单位，让轮播容器和图片自适应屏幕尺寸：

/*Projects Carousal Start*/

.projects {
    background-color: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    border-radius: 0.3rem;
    margin-bottom: 0.3rem;
}

.projects h5 {
    text-align: center;
    font-weight: 700;
    font-size: 1.5rem;
    background-image: linear-gradient( to left, var(--brand_color_one--), var(--brand_color_two--), var(--brand_color_three--), var(--brand_color_four--), var(--brand_color_five--));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 1.5rem;
    line-height: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.carousel {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

.image-container {
    display: flex;
    transform: translateX(0);
    transition: transform 0.5s ease-in-out;
}

.image-container img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.buttons-container {
    display: flex;
    justify-content: space-between;
}

.btn {
    background-color: var(--brand_color_one--);
    color: #fff;
    border: none;
    cursor: pointer;
    width: 49.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 400;
    transition: transform 0.5s ease-in-out;
    height: 2rem;
}

.btn:hover {
    opacity: 0.9;
    background-image: linear-gradient( to right, var(--brand_color_one--), var(--brand_color_two--), var(--brand_color_three--), var(--brand_color_four--), var(--brand_color_five--));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.btn:focus {
    outline: none;
}

/*Projects Carousal End*/

2. 动态JS计算 #

移除硬编码的宽度值，动态获取图片实际宽度，并监听窗口尺寸变化修正位移：

const images = document.getElementById("images");
const leftBtn = document.getElementById("left");
const rightBtn = document.getElementById("right");
const img = document.querySelectorAll("#images img");

let idx = 0;
let interval = setInterval(run, 2000);

// 动态获取单张图片的当前宽度
function getSlideWidth() {
    return img[0]?.clientWidth || 500; // 图片未加载时使用默认值
}

function changeImage() {
    if (idx > img.length - 1) {
        idx = 0;
    } else if (idx < 0) {
        idx = img.length - 1;
    }
    const slideWidth = getSlideWidth();
    images.style.transform = `translateX(${-idx * slideWidth}px)`;
}

function run() {
    idx++;
    changeImage();
}

function resetInterval() {
    clearInterval(interval);
    interval = setInterval(run, 2000);
}

// 窗口大小变化时重新计算轮播位置
window.addEventListener('resize', changeImage);

rightBtn.addEventListener("click", () => {
    idx++;
    changeImage();
    resetInterval();
});

leftBtn.addEventListener("click", () => {
    idx--;
    changeImage();
    resetInterval();
});

关键修改说明 #

• CSS：将轮播容器改为width:100%; max-width:500px，确保小屏幕自适应，大屏幕不超出最大宽度；图片宽度设为100%继承容器宽度。
• JS：新增getSlideWidth()函数动态获取图片宽度，替换硬编码的500px；添加resize事件监听，确保屏幕尺寸变化时轮播位置自动修正。

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