vue-slick

import Vue from 'vue'; import Slick from 'vue-slick'; import 'slick-carousel/slick/slick.css'; new Vue({ el: '#app', components: { Slick }, data() { return { slickOptions: { slidesToShow: 3, dots: true, infinite: true, speed: 500, // Any other options that can be got from plugin documentation }, slides: [ 'http://placehold.it/2000x1000?text=Slide%201', 'http://placehold.it/2000x1000?text=Slide%202', 'http://placehold.it/2000x1000?text=Slide%203', 'http://placehold.it/2000x1000?text=Slide%204', 'http://placehold.it/2000x1000?text=Slide%205' ] }; }, methods: { next() { this.$refs.slick.next(); }, prev() { this.$refs.slick.prev(); }, reInit() { // Helpful if you have to deal with v-for to update dynamic lists this.$nextTick(() => { this.$refs.slick.reSlick(); }); }, handleAfterChange(event, slick, currentSlide) { console.log('After change:', currentSlide); } }, template: ` <div> <button @click="prev">Previous</button> <button @click="next">Next</button> <button @click="reInit">Re-init</button> <slick ref="slick" :options="slickOptions" @afterChange="handleAfterChange"> <a v-for="(src, index) in slides" :key="index" :href="src"> <img :src="src" alt="Slide Image" /> </a> </slick> </div> ` });