[VUE] vue.js 에서 swiper 사용하기

 

친절한 분이 IE에서 동작하는 팁을 알려줬다😊

감사한 마음에 캡쳐! 다른 분들도 참고 하면 좋을 것 같다.

 

 

 

 

 

---

 

 

슬라이드 플러그인 중에서 swiper를 자주 쓰고 좋아하는데 이걸 vue에서도 쓸 수 있나 검색해봤더니

vue-awesome-swiper라고 만들어져 있어서 그걸 쓰기로 했다.

 

---

 

1. vue cli 작업 환경에서 swiper 패키지를 다운로드한다.

 

이때, swiper 6 이상 버전은 vue3에 최적화되어 있는데, 현재(2021.03 기준)로 vue3는 아직 버그가 많다고 해서

vue 2.x 버전에서 사용할 수 있는 swiper 5.3.7을 다운로드한다.

 

yarn add 'swiper@5.3.7' --save-dev
yarn add 'vue-awesome-swiper' --save-dev

 

 

2. swiper를 컴포넌트로 빼서 사용하려고 아래처럼 index를 먼저 작업

 

<template>
  <div>
    <list-item>리스트 아이템</list-item>
  </div>
</template>

<script>
import ListItem from "@/경로";
export default {
  name: "index",
  components: {ListItem}
}
</script>

 

 

3. swiper 전용 컴포넌트 작업 (슬라이드 될 때 현재 index 값을 가져오기)

 

<template>
	<swiper class="swiper" ref="mySwiper" 
		:options="swiperOptions" 
		@slideChange="slideChangeTransitionStart"
	>

		<swiper-slide>1</swiper-slide>
		<swiper-slide>2</swiper-slide>
		<swiper-slide>3</swiper-slide>
		
		<!-- pagination -->
		<div class="swiper-pagination" slot="pagination"></div>
        
		<!-- navigation -->
		<div class="swiper-button-prev swiper-btn-prev" slot="button-prev"></div>
		<div class="swiper-button-next swiper-btn-next" slot="button-next"></div>
	</swiper>
</template>


<script>
	import Vue from 'vue'
	import VueAwesomeSwiper from 'vue-awesome-swiper'
	import 'swiper/css/swiper.css'
	Vue.use(VueAwesomeSwiper);

	import {Swiper,SwiperSlide} from 'vue-awesome-swiper'

	export default {
		name: 'ListItem',
		components: {
			Swiper,
			SwiperSlide
		},
		methods: {
			slideChangeTransitionStart() {
				console.log(this.swiper.activeIndex); //현재 index값 얻기
			}
		},
		data() {
			return {
				swiperOptions: {
					//loop: true,
					// autoplay:{
					//   delay:1000
					// },
					pagination: {
						el: '.swiper-pagination'
					},
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},                    
				},
			}
		},

		//참조하고 있는 값이 변경될 때마다 정의된 계산식에 따라 값을 출력
		computed: {
			swiper() {
				return this.$refs.mySwiper.$swiper;
			}
		},

		//el이 새로 생성된 vm.$el로 인스턴스가 마운트 된 직후
		mounted() {
			//console.log('Current Swiper instance object', this.swiper)
			//this.swiper.slideTo(3, 1000, false)
		}


	}
</script>

<style lang="scss" scoped>
	.swiper-slide {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-weight: bold;
	}
</style>

 

 

스와이퍼가 정상 작동한다!

이제 이 기본을 가지고 프로젝트에 맞춰 커스텀하면 된다.

 

 

 

---

참고, 출처 : 

 

vue-awesome-swiper git : github.com/surmon-china/vue-awesome-swiper

swiper API : swiperjs.com/swiper-api