[JavaScript] swiper.js 모바일 해상도에서만 사용하기(only mobile)

 

 

initSwiper 함수는 기본적으로 페이지에 하나의 swiper에 있을 때 사용하는 경우고,

initSwiper2 함수는 기본적으로 페이지에 둘 이상의 swiper가 있을 때 사용하면 된다.

    var ww = $(window).width();
    var swiperSubNav = undefined;
    var mySwiperMob = undefined;

    function initSwiper() {

        if (ww < 768 && swiperSubNav === undefined) {
            swiperSubNav = new Swiper(".swiper-container.subpage-nav", {
                mousewheel: true,
                slidesPerView: "auto",
                navigation : {
                    nextEl : '.swiper-button-next', // 다음 버튼 클래스명
                    prevEl : '.swiper-button-prev', // 이번 버튼 클래스명
                },
            });
        } else if (ww >= 768 && swiperSubNav !== undefined) {
            swiperSubNav.destroy();
            swiperSubNav = undefined;
        }
    }

    // 2개 이상인 only pc
    function initSwiper2() {
        if (ww < 768 && mySwiperMob == undefined) {
            mySwiperMob = new Swiper(".swiper-container.swiper-mobile", {
                slidesPerView: 'auto',
                centeredSlides: true,
                centeredSlidesBounds: true,
                // autoHeight: true,
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: true,
                },
            });
        } else if(ww < 768 && mySwiperMob[0] == undefined){
            mySwiperMob = new Swiper(".swiper-container.swiper-mobile", {
                slidesPerView: 'auto',
                centeredSlides: true,
                centeredSlidesBounds: true,
                // autoHeight: true,
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: true,
                },
            });
        } else if (ww >= 768 && mySwiperMob != undefined) {
            if(mySwiperMob.length == undefined){
                mySwiperMob.destroy();
                mySwiperMob = undefined;
            } else {
                for( var i = 0; i < mySwiperMob.length; i++){
                    if(mySwiperMob[i] != undefined){
                        mySwiperMob[i].destroy();
                        mySwiperMob[i] = undefined;
                    }
                }
            }
        }
    }

    if($('.swiper-container').hasClass('subpage-nav')){
        initSwiper();
    } else if($('.swiper-container').hasClass('swiper-mobile')){
        initSwiper2();
    }

    $(window).on('resize', function () {
        ww = $(window).width();
        if($('.swiper-container').hasClass('subpage-nav')){
            initSwiper();
        } else if($('.swiper-container').hasClass('swiper-mobile')){
            initSwiper2();
        }
    });

    if (!(swiperSubNav == undefined)){
        var img_index = $('.swiper-slide.active').index();
        swiperSubNav.slideTo(img_index);
    }