Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Jun 29, 2019. It is now read-only.

Commit 5cef64c

Browse files
author
Javier Diaz
committed
feat: glider components ✨
1 parent 9ca48f1 commit 5cef64c

File tree

5 files changed

+155
-0
lines changed

5 files changed

+155
-0
lines changed

‎index.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Glider from './packages/Glider/index';
2+
import GliderSlide from './packages/GliderSlide/index';
3+
4+
const components = [
5+
Glider,
6+
GliderSlide,
7+
];
8+
9+
const install = (Vue) => {
10+
components.map(component => Vue.component(component.name, component));
11+
};
12+
13+
if (typeof window !== 'undefined' && window.Vue) {
14+
install(window.Vue);
15+
}
16+
17+
export default {
18+
version: '0.1.0-beta.0',
19+
install,
20+
Glider,
21+
GliderSlide,
22+
};

‎packages/Glider/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Glider from './src/main.vue';
2+
3+
Glider.install = (Vue) => {
4+
Vue.component(Glider.name, Glider);
5+
};
6+
7+
export default Glider;

‎packages/Glider/src/main.vue‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<div class="glider-contain">
3+
<div ref="glider" class="glider">
4+
<slot />
5+
</div>
6+
<div ref="dots" role="tablist" class="dots"></div>
7+
</div>
8+
</template>
9+
<script>
10+
import Glider from 'glider-js';
11+
import 'glider-js/glider.min.css';
12+
13+
export default {
14+
name: 'Glider',
15+
props: {
16+
slidesToShow: {
17+
type: [String, Number],
18+
default: 1,
19+
},
20+
slidesToScroll: {
21+
type: [String, Number],
22+
default: 1,
23+
},
24+
itemWidth: {
25+
type: Number,
26+
default: undefined,
27+
},
28+
exactWidth: {
29+
type: Boolean,
30+
default: undefined,
31+
},
32+
scrollLock: {
33+
type: Boolean,
34+
default: false,
35+
},
36+
scrollLockDelay: {
37+
type: Number,
38+
default: 250,
39+
},
40+
resizeLock: {
41+
type: Boolean,
42+
default: true,
43+
},
44+
rewind: {
45+
type: Boolean,
46+
default: false,
47+
},
48+
scrollPropagate: {
49+
type: Boolean,
50+
default: false,
51+
},
52+
draggable: {
53+
type: Boolean,
54+
default: false,
55+
},
56+
dragVelocity: {
57+
type: Number,
58+
default: 3.3,
59+
},
60+
duration: {
61+
type: Number,
62+
default: 0.5,
63+
},
64+
propagateEvent: {
65+
type: Boolean,
66+
default: true,
67+
},
68+
addTrack: {
69+
type: Boolean,
70+
default: true,
71+
},
72+
},
73+
data: () => ({
74+
$glider: null,
75+
}),
76+
mounted() {
77+
this.init();
78+
},
79+
methods: {
80+
init() {
81+
const settings = {
82+
dots: this.$refs.dots,
83+
slidesToShow: this.slidesToShow,
84+
slidesToScroll: this.slidesToScroll,
85+
itemWidth: this.itemWidth,
86+
exactWidth: this.exactWidth,
87+
scrollLock: this.scrollLock,
88+
scrollLockDelay: this.scrollLockDelay,
89+
resizeLock: this.resizeLock,
90+
rewind: this.rewind,
91+
scrollPropagate: this.scrollPropagate,
92+
draggable: this.draggable,
93+
dragVelocity: this.dragVelocity,
94+
duration: this.duration,
95+
propagateEvent: this.propagateEvent,
96+
addTrack: this.addTrack,
97+
};
98+
this.$glider = new Glider(this.$refs.glider, settings);
99+
},
100+
},
101+
beforeDestroy() {
102+
if (this.$glider) {
103+
this.$glider.destroy();
104+
}
105+
},
106+
};
107+
</script>

‎packages/GliderSlide/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import GliderSlide from './src/main.vue';
2+
3+
GliderSlide.install = (Vue) => {
4+
Vue.component(GliderSlide.name, GliderSlide);
5+
};
6+
7+
export default GliderSlide;

‎packages/GliderSlide/src/main.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script>
2+
export default {
3+
name: 'GliderSlide',
4+
render(h) {
5+
return h('div', {
6+
attrs: {
7+
class: 'glider--slide',
8+
},
9+
}, this.$slots.default);
10+
},
11+
};
12+
</script>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /