First you need to introduce vue-awesome-swiper, the code is as follows:
import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper)
Introduce css import '../../static/swiper/swiper.min.css' in main.js
In this way we can use swiper, the usage code is as follows:
This is the configuration used inside:
To define tabs yourself, first you need to know how to automatically jump to a banner page after clicking a button. Use the swiper method and the global method of swiper.
In this way, you can directly call this.swiper to call seiper's native method.
Jump to the specified page this.swiper.slideTo(1, 400, false) three parameters, the first is the jump subscript, the second is the jump time, the third is the callback function, set to false The onSlideChange callback function will not be triggered.
This achieves the effect of clicking a button to jump to a certain banner. The rest is to slide to a certain banner to automatically light up a button. The official website allows you to use slideChangeEnd, but after testing, this method is not easy to use. , I finally used transitionEnd.
Note: When using methods in Vue, you must use on:{}. This method has an example in the picture above. In principle, all the methods on the Swiper official website can be used. However, if one of them is indeed unavailable, it is not because the method used is wrong. It just doesn't support a certain method.