[Slider] Swiperjs 옵션

주로 사용하는 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(){}),           // 스와이퍼가 초기화 된 후 동작시작
});