swiper pagination 2개 연동 - controller 적용

 

안녕하세요 찐망고입니다.

오늘은 swiper의 페이징을 두 개 연동하는 작업을 해 볼 건데요.

 

Expect better you-에스쁘아

에스쁘아 메인사이트

 

swiper로 만들어진 에스쁘아 히어로섹션인데 엇 분명 페이징이 하나죠?

보아하니 progressbar로 타입을 지정해 주면 끝날 것 같은데 

왜...????

라고 할 줄 알고 짠 보세요~?

progressbar부분이 터치가 돼요.. 클릭이 됩니다.

 

const visualSwiper = new Swiper(".swiper", {
	pagination: {
    	el: ".swiper-pagination",
        clickable: true,
    },
})

 

 

swiper는 페이징에 clickable을 제공하는데요. 

페이징을 클릭하면 해당 슬라이더로 이동하는 거죠. 

하지만.. type이 progressbar로 바뀌면 적용되지 않아요.. (의도와 달라서 일까요?)

 

여러 가지 방법이 있지만

저는 최대한 swiper기능만 이용해서 만들어볼게요!

(귀찮아서 그런 거 맞아요)

 

<div class="swiper">
	<div class="swiper-wrapper">
    	<div class="swiper-slide">
        	<picture>
            	<source media="(max-width: 768px)" srcset="모바일이미지경로">
                <img src="pc이미지경로" alt="">
            </picture>
        </div>
        <div class="swiper-slide">
        	<picture>
            	<source media="(max-width: 768px)" srcset="모바일이미지경로">
                <img src="pc이미지경로" alt="">
            </picture>
        </div>
        <div class="swiper-slide">
        	<picture>
            	<source media="(max-width: 768px)" srcset="모바일이미지경로">
                <img src="pc이미지경로" alt="">
            </picture>
        </div>
        <div class="swiper-slide">
        	<picture>
            	<source media="(max-width: 768px)" srcset="모바일이미지경로">
                <img src="pc이미지경로" alt="">
            </picture>
        </div>
    </div>
    <div class="swiper-pagination pagination-progressbar"></div>
    <div class="swiper-pagination pagination-bullet"></div>
</div>

 

여기서 포인트는 swiper-pagination을 두 개 써줄 것 

 

swiper도 넣어봐야죠? 

두 개의 swiper를 만들어서 연결시킬 거예요.

const visualSwiper = new Swiper(".swiper", {
    loop: true,
    effect: "fade",
    autuplay: {
    	delay: 5000,
        disableOnInteraction: false,
    },
    pagination: {
    	el: ".pagination-bullet",
        type: "bullets",
        clickable: true,
    },
})

const pagingSwiper = new Swiper(".swiper", {
	loop: true,
    effect: "fade",
    pagination: {
    	el: ".pagination-progressbar",
        type: "progressbar",
    },
})

visualSwiper.controller.control = pagingSwiper;

 

마지막 줄이 포인트입니다. 

 

두 개의 페이징이 위아래로 나란히 보일 텐데요. 이젠 css로 맞춰주기만 하면 됩니다. 

여기서부턴 모 껌이지~

/* main-visual */
.main-visual .swiper-slide {
    height: 100vh;
    background-color: tomato;
}
.main-visual img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
.main-visual .swiper-horizontal > .swiper-pagination-progressbar,
.main-visual .swiper-horizontal>.swiper-pagination-bullets {
    left: 50%;
    top: auto;
    bottom: 10%;
    width: 90%;
    max-width: 1600px;
    height: 2px;
    transform: translateX(-50%)
}
.main-visual .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: rgba(0,0,0,0.5);
}

.main-visual .swiper-horizontal>.swiper-pagination-bullets  {
    display: flex;
    bottom: calc(10% - 5px);
    z-index: 10;
    height: 10px;
}
.main-visual .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 25%;
    border-radius: 0;
    height: 10px;
    background-color: transparent;
    margin: 0;
}

 

 

결과물을 확인해 볼까요?

 

See the Pen swiepr controller by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

 

급 추가!

.main-visual .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 25%;
}

 

여기서 25%는 슬라이드 개수에 따른 페이징을 100% 기준으로 n분의 1 한 값인데요.

슬라이드개수는 상황에 따라 늘어날 수도 줄어들 수도 있는데

그때마다 css를 수정하면 눈물이 앞을 가려.... 할 것 같아 코드 추가 해줍니다.

 

const slideCount = document.querySelectorAll('.swiper-slide').length;
const paginationBullets = document.querySelectorAll('.main-visual .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet');

paginationBullets.forEach(bullet => {
	bullet.style.width = `${100 / slideCount}%`;