phpweb 轮播不显示

<div class="carousel">
    <div class="carousel-inner">
        <div class="carousel-item">
            <img src="image1.jpg" alt="Image 1">
        </div>
        <div class="carousel-item">
            <img src="image2.jpg" alt="Image 2">
        </div>
    </div>
</div>

.carousel {
    width: 100%;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    min-width: 100%;
}

document.addEventListener('DOMContentLoaded', function() {
    let items = document.querySelectorAll('.carousel-item');
    let index = 0;

    function showItem(n) {
        items.forEach(item => item.style.transform = `translateX(${100 * (index - n)}%)`);
        index = n;
    }

    setInterval(() => {
        let nextIndex = (index + 1) % items.length;
        showItem(nextIndex);
    }, 3000);
});

<?php
$imageUrls = [
    'image1.jpg',
    'image2.jpg',
    // 其他图片
];

foreach ($imageUrls as $imageUrl) {
    echo '<div class="carousel-item"><img src="' . $imageUrl . '" alt="' . $imageUrl . '"></div>';
}
?>