Swiper slider 여러개 사용하기

스와이퍼 슬라이더를 여러개 사용해보자

Thu, 07 Jun 2018

개인적으로 가장 모던하고 편한 슬라이더는 Swiper 라고 생각한다.
Swiper 슬라이더를 한페이지에 여러개 사용하고, 하나의 스크립트로 처리할때 유용한 스니펫.

$(".swiper-container").each(function(index, element){
    var $this = $(this);
    $this.addClass('instance-' + index);

    var swiper = new Swiper('.instance-' + index, {
        observer: true,
        observeParents: true,
        slidesPerView : 5,
        navigation: {
            nextEl: $('.instance-' + index).siblings('.swiper-button-next'),
            prevEl: $('.instance-' + index).siblings('.swiper-button-prev'),
        },
        scrollbar: {
            el: $('.instance-' + index).siblings('.swiper-scrollbar'),
            hide: false,
        },
        watchOverflow: true
    });
});
Loading...
byseop

BYSEOP 안녕하세요. BYSEOP입니다.
제 글을 읽어주셔서 감사합니다. 도움이 되셨다면 위쪽에 SHARE를 이용해주세요!
궁금한점은 댓글로 남겨주세요. 감사합니다!

  • this is a personal blog built by byseop
  • GatsbyJS, ReactJs, CSS in JS
  • deliverd by Netlify