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

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

서론

모바일 웹 개발에서 슬라이드 기능은 매우 중요합니다. idangerous.swiper.js 플러그인은 모바일에서 터치 제스처를 활용하여 슬라이드를 편리하게 구현할 수 있는 훌륭한 도구 중 하나입니다. 그러나 이 플러그인의 페이징 기능은 숫자나 불릿 형태로만 제공되어, 텍스트 문장으로 페이지네이션을 표현하기 어렵습니다.

이에 대응하기 위해 텍스트 문장을 페이징 처리하는 꼼수를 사용하려 했으며, 처음에는 대략 6~8개의 페이지를 표시하도록 설정하였습니다. 그러나 디자이너의 요청으로 10개의 페이지가 등록되었을 때 초반 6개만 보이고, 나머지는 다음 페이지에서 보이도록 처리해야 했습니다. 이러한 처리를 하려면 플러그인의 코어를 변경해야 하는데, 이는 최신 업데이트를 받는데 어려움을 겪을 수 있습니다.

그래서 저는 setInterval 함수를 활용하여 페이지네이션을 지속적으로 체크하고, swiper-pagination-switch의 인덱스를 사용하여 6개 (또는 7개)를 기준으로 앞쪽에는 "vpage1" 클래스를 부여하고, 뒤쪽에는 "vPage2"를 부여하는 꼼수를 사용했습니다. 이를 통해 2개의 페이지와 유사한 효과를 구현할 수 있었습니다.

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++;
});

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

setInterval(function() {
    checkActive(6);
}, 200);

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 플러그인을 사용하면 모바일 웹 페이지에서 간편하게 슬라이드 기능을 구현할 수 있습니다. 그러나 이 플러그인에서 제공하는 페이지네이션 기능은 숫자나 불릿 형태로만 표현되어, 원하는 텍스트 문장으로 변경하기 어려운 문제가 있습니다.

플러그인의 기능을 건드리지 않고 원하는 스타일로 페이징을 구현하기 위해 몇 가지 꼼수를 사용하였습니다. 먼저, 각 슬라이드 요소의 자식인 <a> 태그에 대한 정보를 가져와서 해당 페이지의 제목을 추출합니다. 이를 통해 텍스트 문장으로 된 페이지네이션을 구성합니다.

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++;
});

또한, 페이지네이션의 총 개수를 표시하기 위해 아래와 같은 코드를 사용합니다.

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

페이지네이션을 동적으로 변경하기 위해 setInterval 함수를 활용합니다. 이 함수는 페이지네이션을 지속적으로 체크하고, 6개 이상의 페이지가 활성화되었을 때 다음 페이지의 페이지네이션을 보이게 하고, 그렇지 않으면 이전 페이지의 페이지네이션을 보이게 합니다.

setInterval(function() {
    checkActive(6);
}, 200);

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 플러그인의 페이지네이션 스타일을 텍스트 문장으로 변경하고, 페이지 수에 따라 동적으로 조절할 수 있는 기능을 구현할 수 있었습니다. 이러한 꼼수를 사용하면 플러그인의 코어를 변경하지 않고도 원하는 스타일을 적용할 수 있으며, 최

신 업데이트를 받을 때에도 문제가 발생하지 않습니다.

상세 설명

위에서 설명한 코드와 기능에 대한 상세한 설명입니다.

서론

• 모바일 웹 개발에서 슬라이드 기능의 중요성.
• idangerous.swiper.js 플러그인 소개 및 특징.

텍스트 문장 페이징 처리

• 플러그인에서 제공하는 페이지네이션의 한계.
• 텍스트 문장으로 페이지네이션을 구현하기 위한 꼼수 사용.

코드 설명

• 각 코드 라인의 역할과 작동 방식에 대한 상세 설명.

결론

• idangerous.swiper.js 플러그인을 활용하여 텍스트 문장 형태의 페이지네이션을 구현하는 방법.
• 플러그인 코어 변경을 피하고, 최신 업데이트를 받을 수 있는 장점.

포스트 요약

이 블로그 포스팅에서는 idangerous.swiper.js 플러그인을 사용하여 모바일 웹 페이지에서 텍스트 문장 형태의 페이지네이션을 구현하는 방법을 상세히 설명했습니다. 페이지네이션을 텍스트 문장으로 표현하기 위해 몇 가지 꼼수를 사용하였고, 플러그인 코어를 변경하지 않으면서 원하는 스타일을 적용하는 방법을 제시하였습니다. 이를 통해 모바일 웹 페이지의 사용자 경험을 개선할 수 있습니다.