jquery响应式轮播插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Carousel</title>
    <style>
        .carousel {
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .slide {
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <div class="slide active">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        var slideIndex = 0;
        showSlides();

        function showSlides() {
            var i;
            var slides = document.getElementsByClassName("slide");
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) {slideIndex = 1}
            slides[slideIndex-1].style.display = "block";
            setTimeout(showSlides, 3000);
        }
    </script>
</body>
</html>