vue에서 swipe 기능 쓰기

https://swiperjs.com/demos

Swiper Demos

swiper 플러그인이 나날이 발전해서 점점 쓰기가 좋아진다

다른 특별한 글 없이 그냥 공식 문서가 너무 잘되어있다

그래서 그냥 위 링크만 봐도 vue에서 swipe 적용하는거쯤이야 금방이지만 그래도 세미 설명이라도 적어보자면

위 사이트에 들어가면 여러가지 슬라이드 타입들이 있을거다

본인이 적용하고싶은 형식에 맞춰서

vue에 적용할거니 vue버전을 선택해보자

그럼 이렇게 예시 샘플이 주어지는데 이거에 맞춰서 넣어주기만해도 완성이다

//HTML
<swiper :slidesPerView="3" :centeredSlides="true" :spaceBetween="10" class="mySwiper">
    <swiper-slide v-for="(item, idx) in Arr" :key="idx">
        <router-link v-bind:to="('/detail/'+idx)" class="swipe_box">
            {{item.name}}
        </router-link>
    </swiper-slide>
</swiper>

//script
<script>


</script>
import { Swiper, SwiperSlide } from "swiper/vue";
export default {
	data() {
		return {
			Arr : ['첫번째','두번째','세번째'],
		}
	},
	components: {
		Swiper,
		SwiperSlide,
	},
}

적용한 모습~

옵션들을 간단하게 설명해보자면

:slidesPerView : 한번에 보여지는 콘텐츠갯수
:centeredSlides : 가운데정렬
:spaceBetween : margin값