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
import '../assets/index.less';
import Slider from '../src/slider';
export default {
data: function data() {
return {
nav1: null,
nav2: null
};
},
mounted: function mounted() {
this.nav1 = this.$refs.slider1;
this.nav2 = this.$refs.slider2;
},
render: function render() {
var h = arguments[0];
return h('div', [h('h2', ['Slider Syncing (AsNavFor)']), h('h4', ['First Slider']), h(
Slider,
{
attrs: { asNavFor: this.nav2 },
ref: 'slider1' },
[h('div', [h('h3', ['1'])]), h('div', [h('h3', ['2'])]), h('div', [h('h3', ['3'])]), h('div', [h('h3', ['4'])]), h('div', [h('h3', ['5'])]), h('div', [h('h3', ['6'])])]
), h('h4', ['Second Slider']), h(
Slider,
{
attrs: {
asNavFor: this.nav1,
slidesToShow: 3,
swipeToSlide: true,
focusOnSelect: true
},
ref: 'slider2' },
[h('div', [h('h3', ['1'])]), h('div', [h('h3', ['2'])]), h('div', [h('h3', ['3'])]), h('div', [h('h3', ['4'])]), h('div', [h('h3', ['5'])]), h('div', [h('h3', ['6'])])]
)]);
}
};