Vue-awesome-swiper

1. CDN

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.0.4/dist/vue-awesome-swiper.js"></script>

 

2. Options

Option Name	Value	Description
freeMode	Boolean	슬라이드하듯이 자유로이 왓다갔다함
sliedsPerView	int || auto	한페이지에서 보여줄 슬라이드 갯수
on	tab || click || slideChange	탭 || 클릭 || 슬라이드 3번 설명 참조
navigation	Object	네이게이션 설정 4번 설명 참조
centeredSlides	Boolean	Ative 상태의 슬라이더 중앙 배치 여부

 

3. on > click 에서 swiper를 잡아야하는 경우

swiper 태그에 ref 속성을 선언

<swiper :options="character_swiper" ref="character_swiper">

character_swiper: {
	slidesPerView: 'auto'
	, speed : 500
	, on : {
		click : function(data){
			const activeIndex = data.clickedIndex;
			if(activeIndex){
				app.$refs.character_swiper.$swiper.slideTo(activeIndex);
			}
		}
	}
}

 

4. Navigation

slot 속성을 주지 않으면 노출이 안된다.

navigation: {
	nextEl: '.swiper-button-next'
	, prevEl: '.swiper-button-prev'
}

<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-button-prev" slot="button-prev"></div>