swiper) Centered Mode - loopedSlides

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

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

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

swiper플러그인은 보면

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

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

그게 기준이 됩니다.

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

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

 

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

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

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

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

 

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

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

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

 

 

 

그래서 추가로 사용한 것이 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",
    },
});

 

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

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.