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

idangerous.swiper.js를 활용하면 모바일에서 슬라이드를 터치하여 컨텐츠를 넘길 수 있어 사용자 경험을 향상시킬 수 있습니다. 그러나 이 플러그인의 단점 중 하나는 텍스트 문장으로 페이지네이션 처리를 할 수 없다는 것입니다. 이 블로그 포스팅에서는 텍스트 문장을 사용한 페이지네이션 스타일을 적용하고, 페이지가 10개 이상이 되었을 때 초반 6개만 보이도록 처리하는 방법을 소개합니다.

상세 설명

페이지네이션을 텍스트 문장으로 처리하기 위해서는 몇 가지 꼼수가 필요합니다. 이러한 처리를 위해 플러그인의 코어를 수정하지 않고도 원하는 스타일을 적용할 수 있습니다. 이를 위해 다음과 같은 단계를 따라갈 것입니다.

1. 페이지네이션 텍스트 적용

idangerous.swiper.js에서 페이지네이션 텍스트를 적용하기 위해서는 각 슬라이드에 대한 정보를 가져와야 합니다. 각 슬라이드의 정보를 가져오기 위해 다음과 같은 코드를 사용할 수 있습니다.

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. 페이지네이션 스타일 변경

페이지네이션의 스타일을 변경하려면 페이지네이션의 첫 번째부터 원하는 개수까지의 요소에 클래스를 추가하면 됩니다. 이를 위해 slice() 함수를 사용할 수 있습니다.

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

3. 페이지네이션 총 개수 표시

페이지네이션의 총 개수를 표시하기 위해 다음 코드를 사용합니다.

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

4. 자동 업데이트

위에서 설명한 내용을 자동으로 업데이트하기 위해 setInterval 함수를 사용합니다.

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

결론

이 블로그 포스팅에서는 idangerous.swiper.js 플러그인을 사용하여 모바일 슬라이더를 만들고, 텍스트 페이지네이션 스타일을 적용하는 방법을 소개했습니다. 이를 통해 플러그인의 코어를 건드리지 않고도 원하는 페이지네이션 스타일을 적용할 수 있습니다. 이러한 꼼수를 사용하면 플러그인 업데이트에도 더 쉽게 대응할 수 있습니다.

요약

idangerous.swiper.js를 사용하여 모바일 슬라이더를 만들 때, 텍스트 페이지네이션 스타일을 적용하는 방법을 소개합니다.
페이지네이션 텍스트를 적용하고, 페이지 스타일을 변경하는 방법을 설명합니다.
자동 업데이트를 통해 페이지 스타일을 동적으로 변경할 수 있도록 합니다.

키워드

Jquery, 스와이퍼 슬라이더, 플러그인, idangerous.swiper.js, 페이지네이션, 텍스트 스타일 변경, 자동 업데이트, 모바일 슬라이더, 코어 수정, 블로그 포스팅, 스타일, 페이지 스타일, 페이지네이션 텍스트, 업데이트 대응

html5css2018

이 블로그 검색