swiper.html

swiper.html

<template>
<div v-swiper:mySwiper="swiperOption" v-once>
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="image in imagesSrc" :key="image.listId">
            <img v-lazy="findThumb(image, tradeCardCarouselThumb).src">
        </div>
    </div>
    <div class="zoom-label">
        <div class="icon zoom-white"></div>
        <span>Увеличить</span>
    </div>
    <button class="btn nav-prev">
        <div class="icon arrow-prev"></div>
    </button>
    <button class="btn nav-next">
        <div class="icon arrow-next"></div>
    </button>
</div>
</template>


<script> 

import Vue from 'vue';
import moment from 'moment';
import addSrcMixin from '@/mixins/images-with-src';
import VueLazyload from 'vue-lazyload';
import slideTemplate from './slide';
Vue.use(VueLazyload);
if(!Vue.prototype.$isServer) {
    const VueAwesomeSwiper = require('vue-awesome-swiper/ssr');
    require('swiper/dist/css/swiper.css');
    Vue.use(VueAwesomeSwiper);
}

export default {
     props => {
          imagesSrc: Array
     }, 

     methods: {
         pushSlide(slides) {
              this.mySwiper.appendSlide(...slides.map(src => {
                return slideTemplate(src);
              }));
         }
     }

     
}
</script>