ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Slider] Swiperjs 옵션
    IT/PLUGIN 2022. 5. 30. 17:56

    주로 사용하는 Swiperjs 옵션

    // ! 동일한 스와이퍼 함수가 2번이상 호출되면 이슈가 발생됨(ex : 'pagination' 비정상 작동)
    // ! thumbs 적용시 일부태그('input, select, option, textarea, button, video')에 적용할 경우 액티브된 요소가 움지이지 않는 이슈 발생함
    // (set swiper function name.touchEventsData.formElements = '컨트롤 제어 태그 나열'; )
    
    var swiper = new Swiper('.swiper', {
        initialSlide : 0,                  // 슬라이드 시작위치값(몇번째 슬라이드부터 보여 줄것 인지 설정)
        speed : 400,                       // 슬라이드 전환 초 수 설정(duration 효과 설정)
        loop : false,                      // 슬라이드 반복 여부
        loopAdditionalSlides : 1,          // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정
        loopedSlides : 8,                  // 루프 모드를 사용할때, 얼마나 많은 슬라이드를 복제(duplication)하는지 설정
                                           // 루프 모드에서 duplication이 정상적으로 안 먹을때 넣기
    
        // [Parameter] CenteredSlides
        centeredSlides : true,             // 슬라이드 가운데로 배치
        
        // [Parameter] Nested
        nested : true,                     // 슬라이드 내 슬라이드 중첩시 추가
    
        // [Modul] autoplay
        autoplay: {                        // 자동 슬라이드 설정(비 활성시 false)
            delay: 4500,                   // 진행 시간 설정(머물러 있는 초 수 설정)
            disableOnInteraction: false,   // 스와이핑 후 자동 재생 진행 여부 설정(false시 자동재생 유지)
        },
    
        // [Modul] Free mode
        freeMode : true,                   // 슬라이드 넘길 때 위치 고정 여부
    
        // [Parameter] Autoheight
        autoHeight : false,                // 슬라이드 래퍼의 높이를 현재 활성화된 슬라이드 높이에 맞게 가변
    
        // [Modul] Effects
        effect : 'fade',                   // 슬라이드 전환 효과(총 5가지)
                                              'slide' // 기본 슬라이드 전환
                                              'fade' // 희미해지면서 슬라이드 전환
                                              'cube' // 큐브 형태로 전환
                                              'coverflow' // 약간의 그림자와 함께 슬라이드를 밀어내며 전환
                                              'flip' // 카드를 뒤집듯이 전환
    
        // [Parameter] Slides grid
        spaceBetween : 10,                 // 슬라이드 사이 간격 설정
        slidesPerView : 5,                 // 한 화면에 보여지는 기본 슬라이드 갯수 
    
        // [Parameter] Disable swiper and hide navigation when container not overflow
        watchOverflow : false,             // 슬라이드가 1개 이하 일떄, pager, button 숨김 여부 처리
                                              (해당 기능이 발현이 안되면, 
                                               css에 '.swiper-pagination-lock{display: none;}' 
                                               내용이 누락되서임)
    
        // [Parameter] Touches
        touchRatio : 0,                    // 터치 비율 조정(숫자가 올라갈수록 슬라이드를 넘길떄 필요한 터치 동작이 줄어듬)             
        allowTouchMove : false             // 슬라이드 터치 무브 제어(flase 설정시 무브X, 그외 컨트롤러로는 움직인다.)
        threshold : 100,                   // 마우스 감도(마우스 터치 감도가 설정한 값 보다 낮으면 움직이지 않는다.)
            
        // [Parameter] Progress
        watchSlidesProgress : true,        // thumbs설정시 추가 param(동기화 슬라이드 설정)
        watchSlidesVisibility : true,      // thumbs로 동기화될 슬라이드를 바라보게 설정 
    
        // [Parameter] Clicks
        slideToClickedSlide : true,        // 해당 슬라이드 클릭시 슬라이드 위치로 이동
    
        // [Parameter] Observer
        observer : true,                   // thumbs설정시 추가 param(동기화 슬라이드 설정)
        observeParents : true,             // thumbs로 동기화될 슬라이드 중 부모슬라이드를 바라보게 설정 
    
        // [Modul] Thumbs
        thumbs: {
            swiper: recommMixMenu          // thumbs로 동기화될 슬라이드 중 부모가 될 슬라이드
        }
    
        // [Modul] Navigation  
        navigation : {
            nextEl : '.swiper-button-next', // 다음 슬라이드 이동 버튼 설정(클래스 지정, 셀렉터로 경로 설정 가능) 
            prevEl : '.swiper-button-prev', // 이전 슬라이드 이동 버튼 설정(클래스 지정, 셀렉터로 경로 설정 가능)
        },
    
        // [Modul] Pagination
        pagination : {
            el : '.swiper-pagination-num',                // 페이지네이션 설정 : 태그 위치 작성(! 다중의 스와이퍼 설정시, 페이지네이션에 중첩이 일어날수 있으니 반드시 태그네임을 각기 다르게 설정할것)
            clickable : true,                             // 클릭시 위치 이동 : true, false
            renderBullet : function (index, className) {  // 페이지네이션 블릿 커스텀 함수(index, className 기본형)
                return 'custom tag write';                // 커스텀한 영역을 리턴 후 작성
            },
        },
    
        // [Modul] Scrollbar
        scrollbar : {                      // loop모드에서는 지원 안됨(루프로 돌리고 싶으면, pagination으로 css커스텀)
            el : ".swiper-scrollbar",      // 스크롤바 설정 : 태그 위치 작성            
            hide : false,                  // 인터페이스 로드 후 스크롤바 숨김 처리(스와이핑시 스크롤바 생성)
            draggable : true,              // 스크롤바를 드래그해서 움직일수 있는지 여부
        },
    
        // [Methods] 
        .destroy()                         // 스와이퍼 기능 제거 >> swiper.destroy(deleteInstance, cleanStyles)
        .autoplay.start()                  // 자동 재생 시작
        .autoplay.stop()                   // 자동 재생 정지
    
        // [Evnet]
        on:{},                             // 매개변수로 사용시 스와이퍼 초기화 될 떄 동작
        activeIndexChange                  // 슬라이드 넘어갈때 이벤트 호출
        on('init',function(){}),           // 스와이퍼가 초기화 된 후 동작시작
    });

     

    반응형

    'IT > PLUGIN' 카테고리의 다른 글

    [jQuery UI] Date Picker  (0) 2022.08.08
    [Plugin] Rateit.js 란, 그리고 옵션  (0) 2022.06.02
    [Scroll] mCustomscrollbar js 란, 그리고 옵션  (0) 2022.06.02
    [Slider] Swiperjs 란, 그리고 설치  (0) 2022.05.30

    댓글

Designed by Tistory.