swiper pagination 커스텀 - 텍스트로 변경하기

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

오래간만에 swiper관련 포스팅을 하네요.

오늘은 pagination의 블릿 모양 대신 텍스트로 나오게 작업을 해볼까 합니다.

학생포트폴리오 index화면

 

마녀공장을 클론코딩한 학생의 swiper슬라이더인데요.

텍스트를 클릭해서 화면을 넘기고 싶은 거죠 ㅎㅎ

 

 

여러 방법이 있으나 저는 배열을 이용해서 작업했습니다.

const bullet = ['마녀공장', 'GS25'];
const swiper01 = new Swiper ('.work-slider, {
    loop: true, 
    pagination: {
    	el: '.work-slider .swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
        	return '<div class="' + className + '"><span>' + (bullet[index]) + '</span></div>';
        }
    }
})

 

포인트는 슬라이더의 개수에 맞춰 텍스트 배열의 개수도 맞춰야 한다는 점이고

index순서에 맞춰 순서대로 들어간다는 점

html은 적절하게 요소를 수정할 수 있습니다~

 

swiper가 잘 적용이 되면 브라우저에서 이렇게 두 개의 swiper-pagination-bullet가 생성되면서 

각각 배열 안에 들어간 텍스트들이 보이게 됩니다.

swiper pagination custom

 

 

swiepr.css를 이용하게 되면 텍스트랑 함께 동그라미 모양도 같이 생기거든요.

그걸 모두 초기화시켜서 없애주셔야 합니다

css로 가능하겠죠?

.swiper-pagination-bullet {
    width: auto;
    height: auto;
    border-raius: 0;
    background-color: transparent;
}
.swiper-pagination-bullet-active {
	background-color: transparent;
}