@ryusei/light
Version:
<div align="center"> <a href="https://light.ryuseijs.com"> <img alt="RyuseiLight" src="https://light.ryuseijs.com/images/svg/logo.svg" width="70"> </a>
103 lines (95 loc) • 2.77 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<link href="../../../../dist/css/themes/ryuseilight-ryusei.min.css" rel="stylesheet">
</head>
<body>
<h3>Practical Example</h3>
<pre>
<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>
</pre>
<h2>Mustache</h2>
<pre>
<div>
Message: {{ ok ? 'YES' : 'NO' }}
</div>
{{ [ 'a', 'b' ].map( word => `${ word }${ word }` ).join( '-' ) }}
</pre>
<script src="../../../../dist/js/ryuseilight.min.js"></script>
<script src="../../../../dist/js/languages/vue.min.js"></script>
<script>
const ryuseilight = new RyuseiLight();
ryuseilight.apply( 'pre', { language: 'vue' } );
</script>
</body>
</html>