How to Implement the sample code of carousel images in Vue, and the sample code of vue carousel
I feel that this function will be involved in any project. Today I will share with you my implementation methods. If there is something wrong, please note that I am updating it.
The following is the overall code. I made the carousel image a separate component and you can use it as needed. The specific code is as follows:
<Template> <div class = "content"> <div class = "focus"> <! -- Focus begin --> <swiper: options = "swiperOption"> <! -- Map is an array. Here we use v-for to loop out the data --> <swiper-slide v-for = "item in map"> <a: href = "item. I _route "rel =" external nofollow "target =" _ blank ">! [] (Item. I _url) </a> </swiper-slide> <div class = "swiper-pagination" slot = "pagination"> </div> </swiper> <! -- Focus end --> </div> </template> <script> // The following two plug-ins are referenced. Of course, before use, install // npm install vue-awesome-swiper -- save import VueAwesomeSwiper from 'vue-awesome-swiper 'import {swiper, swiperSlide} from 'vue-awesome-swiper 'export default {data () {return {swiperOption: {autoplay: 5000, initialSlide: 1, loop: true, pagination :'. swiper-pagination ', paginationClickable: true, onSlideChangeEnd: swiper =>{// console. log ('onslidechangeend', swiper. realIndex) }}, mounted () {this. bannerInfo () ;}, components: {swiper, swiperSlide}, methods: {// carousel image initialization bannerInfo () {// obtain image data through the interface this. $ fetch ('get/image/list '). then (res => {if (res. errCode = 200) {this. map = res. errData ;}}) ;}}</script>
The above is all the code for implementing carousel images. If you are interested, please try again. I hope you will continue to follow our website! If you want to learn VUE, you can continue to pay attention to this site.