개발노예 코드와 일상

코딩할때 javascript나 jquery 에서 여러가지 슬라이더를 사용한다

자주 사용하는 스위퍼 슬라이더는 

옵션 자체에 반응형을 지원해서

간편하게 사용하고는한다

일단 js 파일들을 추가한다 css도 추가하던가

swiper.min.css

swiper.min.js

공홈이나 여러군데 돌아다니는걸로 다운받아서 선언해주고 

var swiper1 = new Swiper('#main-visual', {    
            //pagination: {
            //el: '.swiper-pagination',
            //    clickable: true,
            //    renderBullet: function (index, className) {
            //    return '<span class="' + className + '">' + (menu[index]) + '</span>';
            //    }
            //},
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            spaceBetween: 0, //30
            loop: true,
            autoHeight : true,
            autoplay: {
                delay:5000,
                disableOnInteraction: true
            },
        });

이렇게 기본형태로 사용하고있다

반응형 옵션이 필요할때는

breakpoints: { 

  320: { slidesPerView: 2, spaceBetween: 20 },

  640: { slidesPerView: 4, spaceBetween: 40 }

}

이렇게 옵션을 추가해준다