통합검색

Javascript

[Javascript] swiper 첫번째 슬라이드 시작 위치 변경하기(offset)

  • 2025.11.01 13:30:46


swiper로 centeredSlides 를 설정하지 않는 경우, 첫번재 슬라이드 시작 위치를 아래 화면과 같이 변경 하고자 할때, swiper의 offset 기능을 활용하면 된다.
(아래 화면은 slidesPerView 를 5로 설정하고, 화면에 3개의 슬라이드 보여지도록 레이아웃을 구성한 경우다)



[!]swiper 코드[/!] 
const el = document.querySelector('.m4 .roll_wrap');

// 한 칸(슬라이드 너비 + 간격) 계산
const calcSlot = () => {
    const slide = el.querySelector('.swiper-slide');
    if(!slide) return 0;
    const w = slide.getBoundingClientRect().width;
    return w + 20; // spaceBetween: 20 과 동일하게
};

let offset = 0;

const swiper = new Swiper('.m4 .roll_wrap', {
    loop: true,
    pagination: {
        el: '.m4 .dots',
        clickable: true
    },
    allowTouchMove: true,      // 모바일/PC 드래그 모두 허용
    simulateTouch: true,       // 마우스로 드래그 허용
    grabCursor: true,           // 마우스 올렸을 때 손바닥 커서
    speed: 500, // 슬라이드 전환 속도
    slidesOffsetBefore: 0,
    on: {
        init(sw){
            offset = calcSlot();
            sw.params.slidesOffsetBefore = offset;
            sw.update();
        },
        resize(sw){
            offset = calcSlot();
            sw.params.slidesOffsetBefore = offset;
            sw.update();
        },
        slideChangeTransitionEnd: function () {
            
        }
    },
    spaceBetween: 20, // 간격
    breakpoints: {
        1200: {
            slidesPerView: 5 // PC
        },
        750: {
            slidesPerView: 3 // 태블릿
        },
        0: {
            slidesPerView: 2 // 모바일
        }
    },
});
리스트