Swiper js로 확대/축소 슬라이더

먼저 필요한 파일을 가져와야 합니다.

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> 

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

필수 마크업을 추가합니다.

<div class="container"> <!-- container to center and set slider width -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="swiper-zoom-container"> <!-- All "zoomable" images should be wrapped with the div with swiper-zoom-container class. -->
                    <img src="http://pngimg.com/uploads/bottle/bottle_PNG2095.png" />
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swiper-zoom-container">
                    <img src="http://pngimg.com/uploads/bottle/bottle_PNG2093.png" />
                </div>
            </div>
            <div class="swiper-slide">
                <div class="swiper-zoom-container">
                    <img src="http://pngimg.com/uploads/bottle/bottle_PNG2081.png" />
                </div>
            </div>
        </div>
    </div>
</div>

스타일

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 600px;
    height: 600px;
}

.swiper-container,
.swiper-wrapper,
.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    display: block;
    margin: 0 auto;
    width: auto;
    height: 80%;
}

이제 JavaScript를 추가할 차례입니다.

// Initialize new Swiper instance
const swiper = new Swiper(".swiper-container", {
        // Setting default settings
    grabCursor: true,
    centeredSlides: true,
    loop: true,
        // Setting minimum and maximum zoom ration
    zoom: {
        maxRatio: 1.2,
        minRation: 1
    },

});

// Use built in zoom.in() and zoom.out() function to scale images
// When slide starts to change slideChangeTransitionStart event fires and we use it to scale down the image. 
swiper.on("slideChangeTransitionStart", swiper.zoom.out);
// And when transition has finished scale it up.
swiper.on("slideChangeTransitionEnd", swiper.zoom.in);