/
App.vue
133 lines (118 loc) · 2.9 KB
/
App.vue
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<template>
<main id="app">
<header>
<h1>Tiny carousel - your favourite carousel library 👑</h1>
<h3>Now in <a href="https://vuejs.org" title="Read more about Vue.js!">Vue.js</a> 🎉</h3>
</header>
<TinyCarousel
class="carousel"
tag="ul"
:config="carouselConfig"
:plugins="carouselPlugins"
@after:init="isInitialized = true"
ref="tinyCarousel"
>
<li v-for="index in number" :key="index">
<img
class="carousel__item-img"
:src="`https://picsum.photos/seed/${index}/800/600`"
:alt="index"
>
</li>
</TinyCarousel>
<p class="carousel-status">Carousel is {{ isInitialized ? 'initialized' : 'not initialized' }}</p>
<nav class="row">
<button type="button" @click="clickPrev">prev</button>
<button type="button" @click="clickNext">next</button>
<button type="button" @click="++number">Add slide</button>
<button type="button" @click="--number">Remove slide</button>
</nav>
</main>
</template>
<script lang="ts">
import Vue from 'vue';
import { pluginAutoplay } from '@frsource/tiny-carousel-plugin-autoplay';
import { pluginCustomEvents } from '@frsource/tiny-carousel-plugin-custom-events';
import { pluginMouseDrag } from '@frsource/tiny-carousel-plugin-mouse-drag';
import TinyCarousel, { definePlugin, PluginsProp, TinyCarouselComponent } from './TinyCarousel';
export default Vue.extend({
name: 'App',
components: {
TinyCarousel
},
data() {
const carouselPlugins: PluginsProp = [
definePlugin(pluginAutoplay, {
autoplayTimeout: 5000,
}),
definePlugin(pluginMouseDrag),
definePlugin(pluginCustomEvents),
];
return {
carouselPlugins,
carouselConfig: {
// overflow: false,
},
number: 6,
isInitialized: false,
};
},
computed: {
carousel() {
return (this.$refs.tinyCarousel as TinyCarouselComponent | undefined)?.carousel;
}
},
async updated() {
// always let the TinyCarousel to be rendered first
// before accessing carousel instance
await this.$nextTick()
this.carousel?.play();
},
methods: {
clickPrev() {
this.carousel?.prev();
},
clickNext() {
this.carousel?.next();
}
}
});
</script>
<style>
@import "~@frsource/tiny-carousel-core/dist/index.css";
@import "~@frsource/tiny-carousel-plugin-mouse-drag/dist/index.css";
html, body, #app {
display: flex;
min-height: 0;
}
html {
height: 100%;
}
#app {
flex-flow: column;
text-align: center;
}
h3 {
position: absolute;
bottom: calc(100% - 2.5em);
}
.carousel {
list-style: none;
margin: 0;
padding: 0;
}
.carousel-status {
position: relative;
margin-top: -2.2em;
padding: .4em;
background: rgba(0, 0, 0, .6);
}
.carousel__item-img {
height: 100%;
width: 100%;
object-fit: cover;
}
.row {
display: flex;
}
</style>