Swiper version: 6.4.5 NPM I swiper@6

The following code

<! Create a vue file: --> <template> <! -- Slider main container --> <div class="swiper-container" ref="swiper"> <! -- Additional required wrapper --> <div class="swiper-wrapper"> <! -- Slides --> <div class="swiper-slide" v-for="carousel of carouselList" :key="carousel.id"> <! <img: SRC =" carousel.imageurl "<img: SRC =" carousel.imageurl" v-if="index==0||index===(carouselList.length-1)"> <img v-lazy.container="carousel.imageUrl" alt="" v-else> </div> </div> <! -- If we need pagination --> <div class="swiper-pagination"></div> <! -- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <! -- If we need scrollbar --> <! -- <div class="swiper-scrollbar"></div> </div> </template> <script> // import swiper JS // Import {Swiper, Pagination, Navigation, Autoplay} from 'Swiper '; // import Swiper styles import 'swiper/swiper-bundle.css'; Swiper.use([Navigation, Pagination, Autoplay]); Export default {name: "Carousel", props: {// carouselList: {type: Array, required: }}, // use a listener to trigger the function watch: {// listen for the data carouselList: {handler() {this.$nextTick(() => {// initialize this.initSwiper(); }); }, immediate: true}}, methods: {// Initialize the swiper function initSwiper() {// use this.$refs.swiper instead of the.swiper-container class name Swiper = new swiper (this.$refs.swiper, {loop: true, // autoplay: {// autoplay delay: {// autoplay delay: { 2000, // disableOnInteraction: false, // when the user clicks on the next page, it is still enabled}, pagination: {// Enable el: '. Swiper-pagination ', clickable: true // navigation: {// Enable forward/back buttons nextEl: ". Swiper-button-next ", prevEl: "Swiper - button - prev"}}) / / mouse cover stop switch this swiper. El. Onmouseover = function () {this. Swiper. The autoplay. Stop (); } / / mouse left began to switch this. Swiper. El. Onmouseout = function () {this. Swiper. The autoplay. Start (); } } }, } </script>Copy the code

Component uses the multicast graph component

Import Carousel from "@comps/Carousel"; import Carousel from "@comps/Carousel"; Components :{// register component Carousel} // global register component in main.js Vue.component('Carousel', <Carousel :carouselList = "Carousel data" <Carousel :carouselList = "floor.carouselList"  /> </div>Copy the code