본문 바로가기

Dev/Swiper

Swiper 자주 사용하는 기능

반응형

[Swiper Parameters]

 - autoHeight: boolean

 - speed: number (Duration of transition between slides (in ms))

 - on: object (Register event handlers)

 - loop: boolean

 

* slide

 - spaceBetween

 - slidesPerView

 - centeredSlides

 

* swiping

 - allowSlidePrev: boolean

 - allowSlideNext: boolean // false하면 드래그 슬라이드 작동 x, 네비게이션 클릭 이동은 작동함!

 

 

[Slider Methods & Properties]

 - mySwiper.slides (Dom7 배열과 유사한 슬라이드 HTML 요소 모음. 특정 슬라이드 HTMLElement 사용을 얻으려면mySwiper.slides[1])

 - mySwiper.realIndex (루프 모드에서 복제 된 슬라이드를 고려하는 현재 활성 슬라이드의 인덱스 번호)

 - mySwiper.slideNext(speed, runCallbacks(boolean)); // 다음 슬라이드로 전환 실행
 - mySwiper.slidePrev(speed, runCallbacks);
 - mySwiper.slideTo(index, speed, runCallbacks); // 'speed'매개 변수와 동일한 기간 동안 색인 번호가 'index'매개 변수와 동일한 슬라이드로 전환을 실행
 - mySwiper.slideToLoop(index, speed, runCallbacks); // slideTo와 동일하지만 enabled와 함께 사용하는 경우에 적용 loop. 따라서 이 메서드는 realIndex와 일치하는 슬라이드로 이동

 - mySwiper.detachEvents(); // 드래그 불가능
 - mySwiper.attachEvents();

 


[Events]

 - init
 - slideChange
 - slideChangeTransitionStart
 - slideChangeTransitionEnd
 - slideNextTransitionStart
 - slideNextTransitionEnd
 - slidePrevTransitionStart
 - slidePrevTransitionEnd
 - transitionStart
 - transitionEnd

 


[Navigation Parameters]
 * navigation

 - nextEl
 - prevEl

 


[Pagination]

* pagination

 - el

 - type

 

 

[Autoplay]

* autoplay

 - delay

 - mySwiper.autoplay.start();

 - mySwiper.autoplay.stop();

 

 

[Fade Effect]

* fadeEffect

 

 

[Hash Navigation Parameters]

* hashNavigation

반응형

'Dev > Swiper' 카테고리의 다른 글

replay 클릭 시, 스르륵 효과 없이 화면 이동  (0) 2020.12.11
swiper motion(without scrollMagic)  (0) 2020.11.24