본문 바로가기

WEB/내맘대로 코딩

스와이퍼+스크롤탭

*swiper.js ( idangero.us )

원소스 출처: 신한카드 모바일웹

swiper 옵션 알아두기

Js
var swiperWeb = new Swiper('.swiper-container', {
    initialSlide : 0, //Index number of initial slide.
    direction: "horizontal", //Could be 'horizontal' or 'vertical'
    autoHeight: true,
    loop: true,
    touchAngle: 30, //Allowable angle in degrees to trigger touch move
    threshold: 20, //Threshold value in px. If "touch distance" will be lower than this value then swiper will not move
    a11y: true, //Accessibility,
    touchMoveStopPropagation: true, //If enabled, then propagation of "touchmove" will be stopped
    slidesPerView: 1,
    spaceBetween: 40,
    //Responsive breakpoints
    breakpoints: {
        // when window width is <= 320px
        320: {
            slidesPerView: 1,
            spaceBetween: 10
        },
        // when window width is <= 480px
        480: {
            slidesPerView: 2,
            spaceBetween: 20
        },
        // when window width is <= 640px
        640: {
            slidesPerView: 3,
            spaceBetween: 30
        }
    },
   on: {
    init: function(){
        mainSwiper.afterSlide();
    },
    slideChangeTransitionEnd: function(){
        mainSwiper.afterSlide();
    }
   }
});

중간으로 오게하는 공식 - 무조건 암기

Js
scrollAlign : function(){
    var scrollMenuOn = $(".scroll-wrap .scroller ul li.on"),
        scroller = $(".scroll-wrap .scroller");
    scroller.animate({
        scrollLeft : scrollMenuOn.offset().left + scroller.scrollLeft() + scrollMenuOn.width()/2 - scroller.width()/2 
    }, 500);
},

See the Pen BPMZLz by zoobley (@zoo79) on CodePen.


'WEB > 내맘대로 코딩' 카테고리의 다른 글

틀린그림찾기  (0) 2020.04.15
swiperjs - 앙케이트 설문지  (0) 2020.04.14
전체 체크박스  (0) 2019.08.21
튤팁 tooltip  (0) 2019.08.05
풍선말 (함수형 vs 프로토타입형 코드 비교)  (0) 2019.08.04
스와이퍼+스크롤탭  (0) 2018.08.11