← 목록으로 돌아가기

📱 03. 반응형 슬라이더

💡 특징: 화면 크기에 따라 보여지는 슬라이드 개수가 자동으로 조정됩니다.

📐 반응형 브레이크포인트

💡 브라우저 창 크기를 조절해보세요!

📱
모바일
💻
태블릿
🖥️
데스크톱
스마트워치
🎮
게임기
📺
스마트TV
🎧
헤드폰
📷
카메라

📝 구현 코드

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,
        },
    },
});