swiper renderBullet::페이징 커스텀 (이미지 넣기)

 

일반적으로 알고있는 동그라미 페이지네이션 외에도 
다양한 디자인의 페이지네이션을 만들 수 있다.

그리고 잘 이용하면 두 개의 슬라이드가 연동되는 것과 같은 효과를 낼 수 있다는 장점이 있다. 

 

내가 원하는 페이지네이션은 
첫째, 이미지+텍스트로 이루어져있고 
둘째, hover 효과를 더한
페이지네이션이다.

하나의 페이지네이션 안에 두 개의 이미지와 하나의 텍스트가 들어가도록 해야하는데..

데이터들은 각각 배열에 담고
renderBullet 옵션을 이용해 마크업 할 수 있다.

 

var image = ['se1_icon_1.png','se1_icon_2.png','se1_icon_3.png','se1_icon_4.png']
var hoverimage = ['se1_hicon_1.png','se1_hicon_2.png','se1_hicon_3.png','se1_hicon4.png']
var bullet = ['VISION','STRATEGY','MISSION','GOAL'];

var bottomSwiper = new Swiper('.swiper-bottom', {
    slidesPerView: '1',
    pagination: {
        el: ".swiper-pagination-custom",
            clickable: true,
            bulletClass:"custom_bullet",
            bulletActiveClass: "swiper-pagination-custom-bullet-active",
            renderBullet: function (index, className) {
                return '<div class="' + className + '"><div><img src="./img/' + (image[index]) + '"><img src="./img/'+(hoverimage[index])+'"></div><span>' + (bullet[index]) + '</span></div>';
            },
    },

    autoplay: {
        delay: 3000,
        disableOnInteraction:false,
    },
    speed: 500,
    loop: true,
    touchRatio: 0.2,
    observer: true,
    observeParents: true
});

 

복잡한 구조일수록 return값 작성하기가 헷갈리는데 

return '<div class=""></div>'  을 기본으로 차근차근 채워나가면 된다..

그리고 페이지네이션 class와 active class명도 정해놨으니 나머지 디자인은 css로 꾸미면 끝!

See the Pen Untitled by yeaseula (@yeaseula) on CodePen.

 

이렇게 텍스트만 넣어 만들 수도 있다.