How to use the vue-awesome-swiper Carousel Graph plug-in in vue

This article mainly explains "how to use the vue-awesome-swiper carousel plug-in in vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the vue-awesome-swiper carousel plug-in in vue.

The first step of installation

Npm install vue-awesome-swiper-save

The second part is introduced into main.js

Import Vue from 'vue'import VueAwesomeSwiper from' vue-awesome-swiper'Vue.use (VueAwesomeSwiper)

You can then use the plug-in in the component

Import {swiper, swiperSlide} from 'vue-awesome-swiper' export default {components: {swiper, swiperSlide}, data () {return {swiperOption: {/ / is a component's own property. If notNextTick is set to true, the component will not instantiate swiper through NextTick, which means you can get the swiper object the first time. If you just need to load all over and use the get swiper object to do something Then this attribute must be true notNextTick: true, pagination: '.swiper-pagination', slidesPerView:' auto', centeredSlides: true, paginationClickable: true, spaceBetween: 30, onSlideChangeEnd: swiper = > {/ / the callback method this.page = swiper.realIndex+1 where swiper is placed This.index = swiper.realIndex;}, / / define the sweiper object computed: {swiper () {return this.$refs.mySwiper.swiper }}, mounted () {/ / you can use swiper as an object to use the methods this.swiper.slideTo (0,0, false) on the official website of swiper. }} Thank you for reading. The above is the content of "how to use the vue-awesome-swiper carousel plug-in in vue". After the study of this article, I believe you have a deeper understanding of how to use the vue-awesome-swiper carousel plug-in in vue, and the specific usage needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!