📱 03. 반응형 슬라이더

📝 구현 코드

JavaScript

var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,      // 기본값 (모바일)
    spaceBetween: 10,      // 기본 간격
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    // 반응형 브레이크포인트 설정
    breakpoints: {
        640: {
            slidesPerView: 2,    // 640px 이상에서 2개
            spaceBetween: 20,
        },
        768: {
            slidesPerView: 3,    // 768px 이상에서 3개
            spaceBetween: 30,
        },
        1024: {
            slidesPerView: 4,    // 1024px 이상에서 4개
            spaceBetween: 40,
        },
    },
});