vue 에서 슬라이더 사용하기 (vue-carousel2)

vue-carousel2 vs vue-slick vs vue-swiper 뭘 사용하지?

 

www.npmtrends.com/vue-carousel-vs-vue-slick-vs-vue-swiper

vue carousel vs vue slick vs vue swiper | npm trends

 

그렇다면 vue-carousel 사용법은?

 

vue-owl-carousel

vue-owl-carousel

• :autoplay : 일정 시간마다 자동 스크롤
• :nav : 좌우 클릭시 스크롤 되는 버튼을 숨기거나 노출합니다.
• :dots : 컨텐츠 하단에 컨텐츠의 인덱스를 표현합니다.

 

방법1. ( 간단히 data만 지정)

npm i -s vue-owl-carousel2

<template>   <div class="test-wrap">     <div class="carousel-wrap">       <carousel v-bind="options" @initialized="init" @changed="changed">         <img src="@/assets/03.jpg" />         <img src="@/assets/03.jpg" />         <img src="@/assets/03.jpg" />         <img src="@/assets/03.jpg" />       </carousel>     </div>   </div> </template>   <script> import carousel from "vue-owl-carousel2";   export default {   name: "swipeTest",   components: {     carousel,   },   data() {     return {       plugin: null,       options: {         autoplay: false,         items: 1,         startPosition: 2,         autoplayTimeout: 1000,       },     };   }, }; </script>   <style scoped> .test-wrap {   border: 1px solid #000;   height: 3000px; } .carousel-wrap {   width: 300px;   margin: 0 auto; } </style>

 

방법2.

npm i -s vue-owl-carousel2

<template>   <div class="test-wrap">     <div class="carousel-wrap">       <carousel v-bind="options" @initialized="init" @changed="changed">         <img src="@/assets/03.jpg" />         <img src="@/assets/04.jpg" />         <img src="@/assets/05.jpg" />       </carousel>     </div>   </div> </template>   <script> import carousel from "vue-owl-carousel2";   export default {   name: "swipeTest",   components: {     carousel,   },   data() {     return {       plugin: null,       options: {         autoplay: false,         items: 1,         startPosition: 2,         autoplayTimeout: 1000,       },     };   },   methods: {     handleScroll() {       window.addEventListener("scroll", () => {         let scrollT = window.scrollY;           if (scrollT > 0 && this.options.autoplay === false) {           this.options.autoplay = true;           setTimeout(() => {             this.plugin.refresh();           }, 300);         } else if (scrollT === 0) {           this.options.autoplay = false;           setTimeout(() => {             this.plugin.refresh();           }, 300);         }       });     },     init() {       this.plugin = this.$children[0];     },     changed(e) {       this.options.startPosition = e.item.index;     },   },   mounted() {     this.handleScroll();   },   destroyed() {     window.removeEventListener("scroll", this.handleScroll);   }, }; </script>   <style scoped> .test-wrap {   border: 1px solid #000;   height: 3000px; } .carousel-wrap {   width: 300px;   margin: 0 auto; } </style>