티스토리 뷰

TIL/Vue

SPLIDE로 이미지 Slider만들기

빙빙 2021. 9. 14. 18:03

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

 

A powerful and flexible slider and carousel for vue.js

Vue Splide is the Splide component for Vue.

vuejsexamples.com

이 사이트에서 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>

결과화면 캡쳐본

'TIL > Vue' 카테고리의 다른 글

Node.js에 Mysql연동하기  (0) 2021.09.23
Vue3 달라진 점  (0) 2021.09.13
DOM  (0) 2021.07.26
[Vue] CORS, SOP  (0) 2021.05.18
[Vue] 새로고침해도 데이터 남아있게 만들기  (0) 2021.05.12
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함