jQuery를 사용하여 포커스 효과가 있는 이미지 캐러셀을 만드는 방법

<div class="slideshow">
    <div class="slideshow-images">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <div class="slideshow-navigation">
        <button class="prev">上一张</button>
        <button class="next">下一张</button>
    </div>
</div>

.slideshow-images {
    display: flex;
    overflow: hidden;
    position: relative;
}

.slideshow-images img {
    width: 100%;
    transition: transform 0.5s;
}

.slideshow-navigation {
    text-align: center;
    margin-top: 10px;
}

.slideshow-navigation button {
    background: #333;
    color: #fff;
    padding: 5px 10px;
    margin: 0 5px;
    border: none;
    cursor: pointer;
}

$(document).ready(function() {
    var currentIndex = 0;
    var images = $('.slideshow-images img');

    function showImage(index) {
        images.css('transform', 'translateX(' + (-index * 100) + '%)');
    }

    $('.next').click(function() {
        currentIndex = (currentIndex + 1) % images.length;
        showImage(currentIndex);
    });

    $('.prev').click(function() {
        currentIndex = (currentIndex - 1 + images.length) % images.length;
        showImage(currentIndex);
    });
});

images.eq(index).css('transform', 'scale(1.1)');
images.not(':eq(' + index + ')').css('transform', 'scale(1)');