Practical Example
<template>
<div class="wrapper">
<h2>Thumbnail Slider</h2>
<div class="description">
<a
href="https://github.com/Splidejs/vue-splide/blob/master/examples/src/js/examples/components/ThumbnailsExample.vue"
target="_blank"
rel="noopener"
>
View Code
</a>
</div>
<splide
:options="primaryOptions"
ref="primary"
>
<splide-slide v-for="slide in slides" :key="slide.src">
<img :src="slide.src" alt="slide.alt">
</splide-slide>
</splide>
<splide
:options="secondaryOptions"
ref="secondary"
>
<splide-slide v-for="slide in slides" :key="slide.src">
<img :src="slide.src" alt="slide.alt">
</splide-slide>
</splide>
</div>
</template>
<script>
import { Splide, SplideSlide } from '../../../../../src/js';
import { createSlides } from '../../utils/slides';
export default {
components: {
Splide,
SplideSlide,
},
data() {
return {
primaryOptions: {
type : 'loop',
perPage : 2,
perMove : 1,
gap : '1rem',
pagination: false,
},
secondaryOptions: {
type : 'slide',
rewind : true,
gap : '1rem',
pagination : false,
fixedWidth : 110,
fixedHeight : 70,
cover : true,
focus : 'center',
isNavigation: true,
updateOnMove: true,
},
slides: createSlides(),
count : 0,
}
},
mounted() {
// Set the sync target.
this.$refs.primary.sync( this.$refs.secondary.splide );
},
}
</script>
Mustache
<div>
Message: {{ ok ? 'YES' : 'NO' }}
</div>
{{ [ 'a', 'b' ].map( word => `${ word }${ word }` ).join( '-' ) }}