How to realize the effect of broadcast picture by introducing Swiper plug-in in vue
Today, I will talk to you about how to achieve the effect of rowing pictures through the introduction of Swiper plug-ins in vue. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.
1. First install the carousel graph plug-in dependency:
Npm install vue-awesome-swiper-save
Global introduction of dependency in 2.main.js
Import 'swiper/css/swiper.css'import VueAwesomeSwiper from' vue-awesome-swiper'Vue.use (VueAwesomeSwiper)
Page Code of 3.vue Carousel Graph
Import {Swiper, SwiperSlide} from 'vue-awesome-swiper'export default {name:'work', components: {Swiper, SwiperSlide}, data () {return {swiperList: [' https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',' https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'] SwiperOption: {autoplay: {disableOnInteraction: false, / / after the user operates swiper Whether to disable autoplay delay: 3000, / / automatic switching interval (in ms)}, initialSlide: 0, loop: true, pagination: {el: '.swiper-pagination'}, / / paging button paginationClickable: true OnSlideChangeEnd: swiper = > {/ / console.log ('onSlideChangeEnd', swiper.realIndex)} read the above content Do you have any further understanding of how to achieve the effect of broadcast graphics by introducing the Swiper plug-in in vue? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.
