vue swiper tip
<template>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOptions: {
pagination: {
el: '.swiper-pagination'
},
// Some Swiper option/callback...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper
}
},
mounted() {
console.log('Current Swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
/* 옵션 */
swiperOpt: {
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: { /
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
slidesPerView: 1.5, // 한번에 슬라이드 되는 swiper-slide
spaceBetween: 20, //슬라이드간 마진값
on: {
init:this.init,
sliderMove:this.stopAtoPlay, //methods
sliderChangeTransitionStart:this.stopAutoPlay, //methods
transitionEnd:this.startAutoPlay, //methods
reachBeginning: () => {
//처음 실행되는 함수
},
slideChangeTransitionEnd: function () {
//마지막 실행되는 함수
},
},
},
initialSlide : 기본값은 0 이고 첨시작되는 인덱스를 설정한다.
loop : 기본 값은 "false" 이고 "true" 설정하면 루프 모드로 설정할수 있습니다.
direction : 기본 값은 "horizontal" 이고 "vertical" 설정하면 세로로 형으로 모드를 변경할수 있습니다.
effect : 기본 값은 "slide" 이고 "fade", "cube", "overflow"로 변경할수 있습니다.
speed : 기본 값은 "300" 이고 숫자형태로 움직이는 시간을 정의할수 있습니다.
spaceBetween : 기본 값은 0 이고 숫자형태로 item 간격을 정의할수 있습니다.
slidesPerView : 슬라이더 컨테이너에 동시에 표현할수있는 슬라이드 겟수를 숫자 형태로 정의 합니다.
autoplay: {delay: 5000,}, : (1000 = 1초) 로시간을 정의하면 자동으로 슬라이드를 합니다.
pagination: {el: '.swiper-pagination',type: 'bullets',}, : el(태그 선텍자), type ["bullets", "fraction", "progressbar", "custom"]
breakpoints:
반응형{ slidesPerView: 1, spaceBetween: 10, breakpointsInverse: true, breakpoints: { 320: { slidesPerView: 2, spaceBetween: 20 }, 640: { slidesPerView: 4, spaceBetween: 20 }, } }
realIndex : 진행중인 인덱스 값을 리턴합다.
.previousIndex : 이전 슬라이드 인덱스 번호
.slideTo(index, speed, runCallbacks) : 인덱스 번호로 슬라이드로 실행
.slidePrev(index, speed, runCallbacks) : 이전 슬라이드로 진행합니다.
.slideNext(index, speed, runCallbacks) : 다음 슬라이드로 진행합니다.
.autoplay.stop() : autoplay 모드일때 진행을 정지 합니다.
.autoplay.start() : autoplay 모드일때 진행을 시작 합니다.
.destroy(deleteInstance, cleanupStyles) : Swiper 를초기화 합니다. 기본값(true, false
- deleteInstance : Swiper 인스턴스를 삭제하지 않으려면 false - cleanupStyles : 모든 사용자 정의 스타일이 슬라이드, 래퍼 및 컨테이너에서 제거 하지않으려면 false
.update() : Swiper 컨테이너크기, 슬라이더크기, 컨텐츠등을 새로 불러오기.
.updateSize () - 컨테이너의 크기를 다시 계산합니다.
.updateSlides () - 슬라이드 수와 해당 오프셋을 다시 계산합니다. JavaScript를 사용하여 슬라이드를 추가 / 제거한 후에 유용합니다.
.updateProgress () - 스와이퍼 진행률 다시 계산 .updateSlidesClasses () - 슬라이드 및 글 머리 기호에서 활성 / 이전 / 다음 클래스 업데이트
init: function () { }, : swiper 초기화 후 실행
transitionStart:function(event){}, : 슬라이드 모션이 시작되는 시점에 호출되는 콜백 합수입니다. 인자값으로 현제"Swiper"를 오브젝트로 받아옵니다.
transitionEnd:function(){}, : 슬라이드 모션이 끝나는 시점에 호출되는 콜백 합수입니다. 인자값으로 현제"Swiper"를 오브젝트로 받아옵니다.
touchMove:function(event){} : 손으로 터치 이동할때 콜백 함수 실행
this.swiper.slideTo(3, 1000, false)
this.swiperSlides.push(this.swiperSlides.length + 1)
.slideTo(index, speed, runCallbacks) // 해당 슬라이드로 이동
.slidePrev(index, speed, runCallbacks) // 이전 슬라이드로 이동
.slideNext(index, speed, runCallbacks) // 다음 슬라이드로 이동
.autoplay.start(); // 자동 재생 시작
.autoplay.stop(); // 자동 재생 정지
.destroy() // 슬라이드 제거
slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수
spaceBetween : 6, // 슬라이드 사이 여백
loop : false, // 슬라이드 반복 여부
loopAdditionalSlides : 1, // 슬라이드 반복 시 마지막 슬라이드에서 다음 슬라이드가 보여지지 않는 현상 수정 pagination : false, // pager 여부
autoplay : { // 자동 슬라이드 설정 , 비 활성화 시 false delay : 3000, // 시간 설정
disableOnInteraction : false, // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음 },
navigation: { // 버튼 사용자 지정 nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },
freeMode : false, // 슬라이드 넘길 때 위치 고정 여부
autoHeight : true, // true로 설정하면 슬라이더 래퍼가 현재 활성 슬라이드의 높이에 맞게 높이를 조정합니다.
a11y : false, // 접근성 매개변수(접근성 관련 대체 텍스트 설정이 가능) - api문서 참고!
resistance : false, // 슬라이드 터치에 대한 저항 여부 설정
slideToClickedSlide : true, // 해당 슬라이드 클릭시 슬라이드 위치로 이동
centeredSlides : true // true시에 슬라이드가 가운데로 배치
allowTouchMove : true, // false시에 스와이핑이 되지 않으며 버튼으로만 슬라이드 조작이 가능
watchOverflow : true // 슬라이드가 1개 일 때 pager, button 숨김 여부 설정
slidesOffsetBefore : number, // 슬라이드 시작 부분 여백
slidesOffsetAfter : number, // 슬라이드 시작 부분 여백
pagination : { // 페이저 버튼 사용자 설정
el : '.pagination', // 페이저 버튼을 담을 태그 설정
clickable : true, // 버튼 클릭 여부
type : 'bullets', // 버튼 모양 결정 "bullets", "fraction"
renderBullet : function (index, className) {
// className이 기본값이 들어가게 필수 설정 return '<a href="#" class="' + className + '">' + (index + 1) + '</a>' },
renderFraction: function (currentClass, totalClass) { // type이 fraction일 때 사용 return '<span class="' + currentClass + '"></span>' + '<span class="' + totalClass + '"></span>'; } },