티스토리 뷰
https://vuejsexamples.com/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>
결과화면 캡쳐본
'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
링크
TAG
- vue
- N과M
- 알고리즘
- 백준
- git
- SWEA
- Python
- django
- 안드로이드스튜디오
- 트리
- 비동기패턴
- 배포
- 프로그래머스
- 싸피
- DOM
- vue.js
- 파이썬
- javascript
- Java
- Pyhton
- SQL
- SSAFY
- 위클리챌린지2주차
- AWS
- 세션 스토리지
- splide
- 독학
- commit되돌리기
- SSAFY퇴소
- 자바
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함