swiper) Centered Mode - loopedSlides

오늘은 swiper플러그인에 Centered를 사용해 볼건데요.

아래 쪽 결과물 처럼 보이게 하는거죠

학생포트폴리오 - aesop리뉴얼

swiper플러그인은 보면

슬라이드갯수를 정하면 그 갯수에 따라 화면에 보여지고 

기본적으로 가장 왼쪽에 있는 슬라이드 클래스에 swiper-slide-active가 들어가는데요

그게 기준이 됩니다.

center mode는 가운데 있는 slide에 swiper-slide-active가 들어갑니다.

그러다보니 가운데서 부터 시작을 해요~

 

저렇게 왼쪽이 비어서 시작을 하죠..

loop없이 왼쪽으로 땡기려면 커스텀을 좀 해야하고

loop를 사용하면 자연스럽게 왼쪽이 채워질 거에요 

끝으로 보여지는 slide들이 왼쪽에 채워지는 거죠.

 

하지만 실행시켜 보면 문제점이 발생하는데..

슬라이드가 넘어가는 중에 저렇게 빈공간이?? 생긴다는..

 

swiper center loop 에러

 

 

 

 

그래서 추가로 사용한 것이 loopedSlides인데

loop시 종료/시작전에 슬라이드 수를 정의합니다.

지정하지 않으면 기본적으로 slidePerview로 설정되는데

loop라는게 결과적으로 시작과 끝이 연속적으로 이어져서 나와야 하므로

swiper에서 자동으로 복제 slide를 만들고,

그때 복제된 slide의 수를 설정 할 수 있어요. 

loopedSlides: 3일때

loopedSlides: 2일때

swiper-slide-active가 가운데 있고 

loopedSlides할 때마다 달라지고 있습니다.

지금 이 슬라이드는 loopedSlides를 2,3,4 가능하네요..ㅎㅎ

 

// JS

const boxbSwiper = new Swiper(".box-b-Swiper", {
    slidesPerView: 5,
    spaceBetween: 30,
    centeredSlides: true,
    loop: true,
    loopedSlides: 2,
    pagination: {
        el: ".swiper-pagination",
        type: "progressbar",
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});

 

결과물 동영상으로 확인해 볼까요~