SPLIDE로 이미지 Slider만들기

https://vuejsexamples.com/a-powerful-and-flexible-slider-and-carousel-for-vue-js/

A powerful and flexible slider and carousel for vue.js

이 사이트에서 option여러개 넣고 빼고 하면서 내가 원하는 슬라이드를 만들 수 있다!

 

사진 세개가 자동으로 슬라이드 되는거 만들었따!

<template>
    <div id="mainslider">
        <splide :options="options">
        <splide-slide>
        <img src="@/assets/images/main_1.jpg" alt="main1">
        </splide-slide>
        <splide-slide>
        <img src="@/assets/images/main_2.jpg" alt="main2">
        </splide-slide>
        <splide-slide>
        <img src="@/assets/images/main_3.jpg" alt="main3">
        </splide-slide>
    </splide>
  

   
    </div>
  
</template>

<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';

export default {
    name:"MainSlider",
    components: {
    Splide,
    SplideSlide,
  },
    data() {
      return {
        options: {
        type : 'fade',
        rewind      : true,
        perPage     : 1,
        autoplay    : true,
        pauseOnHover: false,
        arrows      : false,
        dots: true,
        animatedDots: true,

      
        },
      };
    },
}

</script>

결과화면 캡쳐본