-
[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