jQuery如何实现一个轮播图左右翻页的功能

<div class="carousel">  
    <div class="carousel-images">  
        <img src="image1.jpg" alt="Image 1">  
        <img src="image2.jpg" alt="Image 2">  
        <img src="image3.jpg" alt="Image 3">  
        <!-- 更多的图片... -->  
    </div>  
    <button class="prev">Previous</button>  
    <button class="next">Next</button>  
</div>

.carousel {  
    position: relative;  
    width: 500px; /* 根据需要设置宽度 */  
    height: 300px; /* 根据需要设置高度 */  
    overflow: hidden;  
}  
  
.carousel-images {  
    display: flex;  
    transition: transform 0.5s ease;  
}  
  
.carousel-images img {  
    width: 100%;  
    height: auto;  
}  
  
.prev, .next {  
    position: absolute;  
    top: 50%;  
    transform: translateY(-50%);  
    background-color: rgba(0,0,0,0.5);  
    color: white;  
    border: none;  
    cursor: pointer;  
    padding: 10px 15px;  
    font-size: 18px;  
}  
  
.prev { left: 0; }  
.next { right: 0; }

$(document).ready(function() {  
    var currentImageIndex = 0;  
    var images = $('.carousel-images img');  
    var totalImages = images.length;  
  
    function updateCarousel() {  
        var translateX = -(currentImageIndex * 100) + '%';  
        $('.carousel-images').css('transform', 'translateX(' + translateX + ')');  
    }  
  
    $('.prev').click(function() {  
        currentImageIndex--;  
        if (currentImageIndex < 0) {  
            currentImageIndex = totalImages - 1;  
        }  
        updateCarousel();  
    });  
  
    $('.next').click(function() {  
        currentImageIndex++;  
        if (currentImageIndex >= totalImages) {  
            currentImageIndex = 0;  
        }  
        updateCarousel();  
    });  
  
    // 初始化轮播图  
    updateCarousel();  
});