How to realize Carousel Graph based on vue.js Carousel component vue-awesome-swiper

This article introduces the relevant knowledge of "how to realize the carousel map based on the vue.js carousel component vue-awesome-swiper". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Generally speaking, when doing mobile end-to-end broadcast graphics, the most commonly used is the Swiper plug-in, and vue.js also has a carousel component vue-awesome-swiper, which is similar to swiper.

1. Install vie-awesome-swiper

Nam install vue-awesome-swiper-save-dev

two。 Reference the vie-awesome-swiper component, here I am the project created with vie-cli, in main.js:

Import VueAwesomeSwiper from 'vue-awesome-swiper';Vue.use (VueAwesomeSwiper) / / remember not to forget this sentence

Use under 3.Home.vue

Slide1 slide2 export default {data () {return {swiperOption: {/ / all configurations are optional (same as Swiper configuration) notNextTick: true, autoplay: 3000, grabCursor: true, setWrapperSize: true, autoHeight: true, pagination: '.swiper-pagination', paginationClickable: true PrevButton:'.swiper-button-prev', nextButton:'.swiper-button-next', scrollbar:'.swiper-scrollbar', mousewheelControl: true, observeParents:true, onTransitionStart (swiper) {console.log (swiper)}, computed: {swiper () {return this.$refs.mySwiperA.swiper} Mounted () {console.log ("every switch triggers me") This.swiper.slideTo (3, 1000, false)}} "how to realize the carousel map based on vue.js carousel component vue-awesome-swiper" is introduced here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!