js图文列表滑动

<div class="slider-container">
    <ul class="slider-list">
        <li class="slider-item"><img src="image1.jpg" alt="Image 1"><p>描述1</p></li>
        <li class="slider-item"><img src="image2.jpg" alt="Image 2"><p>描述2</p></li>
        <li class="slider-item"><img src="image3.jpg" alt="Image 3"><p>描述3</p></li>
        <!-- 更多列表项 -->
    </ul>
</div>

.slider-container {
    overflow: hidden;
    width: 100%;
}

.slider-list {
    display: flex;
    animation: slide 10s infinite linear;
}

.slider-item {
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

// 如果需要更复杂的滑动控制，可以使用JavaScript来动态调整动画或响应用户交互