Puedes usar algo como esto:

 <template> <div :id="id" class="swiper-container" > <div class="swiper-wrapper" @click="$emit('click')" > <!-- swipe right template --> <template v-if="direction === 'right'"> <v-list-item class="swiper-slide" /> <v-list-item class="swiper-slide"> <v-list-item-content> <slot /> </v-list-item-content> </v-list-item> </template> <!-- swipe left template --> <template v-if="direction === 'left'"> <v-list-item class="swiper-slide"> <v-list-item-content> <slot /> </v-list-item-content> </v-list-item> <v-list-item class="swiper-slide" /> </template> </div> </div> </template> <script> import 'swiper/dist/css/swiper.min.css'; import { Swiper } from 'swiper/dist/js/swiper.esm.js'; export default { props: { id: { type: [String, Number], required: true }, direction: { type: String, default: 'right', validator: value => ['right', 'left'].indexOf(value) !== -1 } }, mounted () { const self = this; const el = '#' + this.id; const direction = this.direction; // Initialize Swiper const swiper = new Swiper(el, { initialSlide: this.direction === 'left' ? 0 : 1, resistanceRatio: 0, speed: 150, observer: true, observeParents: true, }); // Event will be fired after transition swiper.on('transitionEnd', function () { const activeIndex = this.activeIndex; if ((direction === 'right' && activeIndex === 0) || (direction === 'left' && activeIndex === 1)) { self.$emit('swiped'); // Destroy slider instance and detach all events listeners this.destroy(); } }); } }; </script>

El uso puede usar así

 <template> <swiper :slides-per-view="4" :space-between="30" @swiper="onSwiper" @slideChange="onSlideChange" class="default-slider" > <swiper-slide v-for="item in items" :key="item"> <img :src="item" /> </swiper-slide> </swiper> </template> <script> import { Swiper, SwiperSlide } from 'swiper/vue'; export default { components: { Swiper, SwiperSlide, }, data() { return { items: ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg'] } } } </script>