Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기

Jquery 스와이퍼 슬라이더 플러그인 idangerous.swiper.js pagination 스타일 변경하기

서론

Jquery 스와이퍼 슬라이더 플러그인인 idangerous.swiper.js를 사용하면 모바일 기기에서 손쉽게 슬라이드를 터치하여 내용을 넘길 수 있습니다. 그러나 이 플러그인의 페이징 처리 기능은 주로 숫자나 불릿 형태로 페이지를 표시하며, 텍스트 문장으로 페이지네이션을 설정하는 기능은 기본적으로 제공되지 않습니다. 이에 대한 요구사항이 있을 때, 플러그인의 코어를 수정하지 않고도 텍스트 문장을 이용한 페이지네이션을 구현할 수 있습니다. 이 글에서는 이러한 요구사항을 충족시키기 위한 해결책을 제시하고자 합니다.

해결책: 페이지네이션 텍스트 문장으로 변경하기

페이지네이션을 텍스트 문장으로 변경하기 위해서는 몇 가지 단계를 거쳐야 합니다. 먼저, 페이지네이션을 원하는 형태로 변경한 후, 슬라이드의 개수를 초과하는 페이지를 처리할 방법을 생각해야 합니다.

1. 페이지네이션 텍스트 문장으로 변경하기

기본적으로 페이지네이션은 숫자나 불릿으로 표시됩니다. 이를 텍스트 문장으로 변경하기 위해서는 다음과 같은 작업을 수행합니다:

var tmpNo = 0;
$('.popupZone .swiper-slide a').each(function(index, element) {
    var tmpNo2 = tmpNo + 1;
    var tmpTxt = '<span class="popNo mobileHide">' + tmpNo2 + '</span><span class="popTxt">' + $(this).attr('title') + "</span>";
    $('.pagination5 > a:eq(' + tmpNo + ')').html(tmpTxt);
    $('.pagination5 > a').attr('href', '#link');
    tmpNo++;
});

위 코드는 각 슬라이드에 해당하는 텍스트 문장을 생성하고, 페이지네이션의 링크와 함께 설정합니다. 이를 통해 페이지네이션을 텍스트 문장으로 변경할 수 있습니다.

2. 초과 페이지 처리하기

이제 페이지네이션을 텍스트 문장으로 변경했으나, 슬라이드 개수를 초과하는 페이지를 어떻게 처리할지 고민해야 합니다. 이를 위해 다음과 같은 절차를 따릅니다:

// 페이지네이션 초과 페이지 처리
setInterval(function() {
    checkActive(6);
}, 200);

위 코드는 페이지네이션의 초과 페이지를 체크하고, 필요에 따라 보여주거나 숨기는 역할을 합니다. checkActive 함수를 통해 페이지를 제어합니다.

3. 페이지 제어 함수 구현하기

초과 페이지를 제어하기 위한 checkActive 함수를 구현합니다:

// n개 이상일 때 paging 처리
function checkActive(e) {
    var p2end = $('.swiper-pagination-switch').length;
    $('.swiper-pagination-switch').slice(0, e).addClass('vPage1');
    $('.swiper-pagination-switch').slice(e, p2end).addClass('vPage2');

    if (parseInt($('.swiper-active-switch .popNo').text()) > e) {
        $('.vPage2').show();
        $('.vPage1').hide();
    } else {
        $('.vPage2').hide();
        $('.vPage1').show();
    }
}

이 함수는 현재 페이지와 페이지네이션을 비교하여 페이지를 제어합니다. 페이지가 초과하는 경우, 앞쪽 페이지를 숨기고 뒤쪽 페이지를 보여주게 됩니다.

결론

이렇게 해서 idangerous.swiper.js 플러그인을 사용하면서 텍스트 문장 형태로 페이지네이션을 구현하는 방법을 소개했습니다. 이를 통해 디자이너의 요구사항을 충족시키면서도 플러그인의 코어를 건드리지 않고 원활한 업데이트를 유지할 수 있습니다.

참고 사항

• 위 코드에서 사용된 클래스와 변수명은 프로젝트에 따라 다를 수 있으므로 적절히 수정해야 합니다.

끝

이로써 Jquery 스와이퍼 슬라이더 플러그인인 idangerous.swiper.js를 사용한 페이지네이션 스타일 변경에 대한 해결책을 제시하였습니다. 페이지네이션을 텍스트 문장으로 변경하고 초과 페이지를 처리하는 방법을 살펴보았습니다. 이를 참고하여 프로젝트에 적용해보시기 바랍니다.

---

Keywords: Jquery, 스와이퍼 슬라이더, 플러그인, idangerous.swiper.js, 페이지네이션, 텍스트 문장, 초과 페이지 처리, 프로젝트, 업데이트, 디자이너 요구사항

idangerous.swiper.js를 사용하면 모바일에서 슬라이드를 터치해서 넘길 수 있는 장점이 있다.

그런데, idangerous.swiper.js에서 제공하는 여러 템플릿 중에서 페이징 처리를 텍스트 문장으로 처리할 수 있는 기능은 없다.

약간의 꼼수를 사용해서 페이지네이션에 숫자나 불릿 대신 텍스트 문장을 보여주도록 변형했다.

그런데, 대략 6~8개 정도를 배치할 수 있는 이 형태에서 디자이너가, 페이지네이션을 다시 페이징처리를 해서 10개 정도 등록되었을 때 초반 6개만 보이고, 나머지는 다음 페이지에서 보이게 처리해 달라는 주문을 받았다.

그런데 그런 처리를 하려면 플러그인 자체의 코어를 건드려야 하는데...이런 류는 코어를 건드려 버리면, 최신버전 업데이트가 힘들어 진다.

그래서 역시 꼼수를 쓴다.

idangerous.swiper.js pagination 스타일 변경하는 방법.

1. setInterval로 페이지네이션을 계속 체크해서 swiper-pagination-switch의 popNo를 따다. (만약 이걸 만들어 쓰지 않는다면, index()로 구해도 된다.)
2. 6개(혹은 7개든…)를 기준으로 앞쪽에는 vpage1이라는 클래스를 준다.
3. 뒤쪽에는 vPage2를 부여해 준다.

 

나머지 자식들에 대해서는 다른 클래스명을 부여해서, 조건 변경에 따라 해당 클래스들을 show()하거나 hide()해서 제어함으로써 2개 페이지와 같은 효과를 거두게 했다.

<!--main popUpZone Pagination And Text Show -->

var tmpNo=0;

$('.popupZone .swiper-slide a').each(function(index, element) {

var tmpNo2 = tmpNo +1;



<!--main popUpZone Pagination Current nO Show -->

var tmpTxt = '<span class="popNo mobileHide">'+tmpNo2+'</span><span class="popTxt">'+$(this).attr('title')+"</span>";

<!--main popUpZone Pagination Current nO Show -->

$('.pagination5 > a:eq('+tmpNo+')').html(tmpTxt);

$('.pagination5 > a').attr('href','#link');

tmpNo++;

});

<!--main popUpZone Pagination And Text Show -->



<!--main popUpZone Pagination Count Total Show -->

$('.popupZoneCnt .totalCnt').text($('.pagination5 > a').length);

<!--main popUpZone Pagination Count Total Show -->



setInterval(function() {

checkActive(6);

}, 200);

});





//n개 이상일 때 paging 처리

function checkActive(e) {

var p2end = $('.swiper-pagination-switch').length;

$('.swiper-pagination-switch').slice(0,e).addClass('vPage1');

$('.swiper-pagination-switch').slice(e,p2end).addClass('vPage2');

if(parseInt($('.swiper-active-switch .popNo').text()) > e)

{

$('.vPage2').show();

$('.vPage1').hide();

}

else{

$('.vPage2').hide();

$('.vPage1').show();

}

}

</script>