基于HTML/CSS/JS的轮播滑块空项滑动问题排查与修复

以下是针对你遇到的轮播滑动出现空白项问题的具体修改点：

1. 限定轮播项选择范围 #

原代码中items = document.querySelectorAll('.itemreisetipps')可能选中了页面中其他同名元素（比如隐藏的模板元素、冗余DOM），导致items.length大于实际轮播项数量，滑动时出现空白。修改为仅选择轮播容器内的项：

const items = carouselContainer.querySelectorAll('.itemreisetipps');

2. 修复margin值解析错误 #

parseInt(window.getComputedStyle(items[0]).marginRight)可能因返回值带单位、空字符串或非数字内容导致计算错误，添加基数和默认值：

// 在updateCarouselWidth和updateCarousel函数中修改这一行
const itemWidth = items[0].offsetWidth + (parseInt(window.getComputedStyle(items[0]).marginRight, 10) || 0);

3. 窗口 resize 时同步更新轮播位置 #

窗口尺寸变化后，轮播项宽度会改变，仅更新容器宽度会导致当前滑动位置偏移，需同时调用updateCarousel()：

window.addEventListener('resize', () => {
    updateCarouselWidth();
    updateCarousel();
});

4. 添加空值校验避免报错 #

页面加载时若轮播项尚未渲染完成，items[0]会为undefined，添加判断防止报错：

function updateCarouselWidth() {
    if (!items.length) return;
    const itemWidth = items[0].offsetWidth + (parseInt(window.getComputedStyle(items[0]).marginRight, 10) || 0);
    carouselContainer.style.width = `${itemWidth * items.length}px`;
}

function updateCarousel() {
    if (!items.length) return;
    const itemWidth = items[0].offsetWidth + (parseInt(window.getComputedStyle(items[0]).marginRight, 10) || 0);
    carouselContainer.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
}

修改后的完整代码 #

<script> 
// Elemente auswählen
const prevButton = document.querySelector('.carousel-button.prev');
const nextButton = document.querySelector('.carousel-button.next');
const carouselContainer = document.querySelector('.carousel-container');
// 仅选择容器内的轮播项
const items = carouselContainer.querySelectorAll('.itemreisetipps');
let currentIndex = 0; // Aktueller Index des sichtbaren Items

// Funktion zum Berechnen der Breite des Karussells
function updateCarouselWidth() {
    if (!items.length) return;
    const itemWidth = items[0].offsetWidth + (parseInt(window.getComputedStyle(items[0]).marginRight, 10) || 0); // Breite eines Items inkl. Abstand
    carouselContainer.style.width = `${itemWidth * items.length}px`; // Gesamtbreite des Containers
}

// Funktion zum Aktualisieren des Karussells
function updateCarousel() {
    if (!items.length) return;
    const itemWidth = items[0].offsetWidth + (parseInt(window.getComputedStyle(items[0]).marginRight, 10) || 0); // Breite eines Items inkl. Abstand
    carouselContainer.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
}

// Vorheriger Button
prevButton.addEventListener('click', () => {
    if (currentIndex > 0) {
        currentIndex--;
    } else {
        currentIndex = items.length - 1; // Schleife zurück zum letzten Item
    }
    updateCarousel();
});

// Nächster Button
nextButton.addEventListener('click', () => {
    if (currentIndex < items.length - 1) {
        currentIndex++;
    } else {
        currentIndex = 0; // Schleife zurück zum ersten Item
    }
    updateCarousel();
});

// Beim Laden der Seite und bei Fenstergrößenänderung die Breite des Karussells anpassen
window.addEventListener('load', updateCarouselWidth);
window.addEventListener('resize', () => {
    updateCarouselWidth();
    updateCarousel();
});
</script>

内容的提问来源于stack exchange，提问作者Julienne Rüdig