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( '-' ) }}