Example of using swiper plugin to implement carousel in Vue

<!--Use swiper in the msite_nav navigation section of the page-->
<div class="swiper-container">
	<div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
    <!-- swiper carousel dots-->
    <div class="swiper-pagination"></div>
</div>

<script>
import Swiper from 'swiper'
//At the same time, import swiper's css file import 'swiper/dist/css/swiper.min.css'
export default {
  //Note that swiper should be initialized after the page is loaded (mounted) mounted () {
    //Create a swiper instance to implement the carousel new Swiper('.swiper-container', {
      autoplay: true,
      // If you need pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
   })
  }
}
</script>

import 'swiper/swiper-bundle.min.css'

//Create a new watch to monitor categories
watch:
    categories (value) { // There is data in the categories array // But the interface has not been updated asynchronously yet}
}
// Delete the new Swiper...code in mounted

// Using setTimeout can achieve the effect, but the timing is not accurate setTimeout(() => {
	// Create a Swiper instance object to implement the carousel new Swiper('.swiper-container', {
          autoplay: true,
          // If you need pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
	})
}, 100)

// Use it immediately after modifying the data, then wait for the DOM to update.
this.$nextTick(() => {
	// Once the interface update is completed, execute the callback immediately new Swiper('.swiper-container', {
    	autoplay: true,
    	pagination:
    	el: '.swiper-pagination',
    	clickable: true
    }
})