Mobile carousel image vue-awesome-swiper, vue-awesome-swiper

Mobile carousel image vue-awesome-swiper, vue-awesome-swiper

Design documents and demos are written on a daily basis. When I write a carousel image, I think bootstrap is not suitable for mobile terminals, or is not lightweight, So I change it to Swiper, but when I wrote it, I found out how to embed it into Vue?

Σ (° △° |) then )︴!?

There are still a lot of Vue-based plug-ins, so we found vue-awesome-swiper, which is a carousel graph plug-in developed based on Vue and Swiper, but how can I always report a warning when I write an API ...... Study it by yourself ......

This article is only applicable to the use of Vue scaffolding. For the introduction and use of CDN, refer to the API link at the end of this article.

 

 

Install

Npm

npm install vue-awesome-swiper --save

 

 

Introduction

Global Introduction

Introduce it in the main. js file.

import VueAwesomeSwiper from 'vue-awesome-swiper' // require stylesimport 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)

Partial Import

Introduce

import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'

Add swiper to components

components:{    swiper,    swiperSlide  }

 

 

Use

Html Structure

 

<swiper :options="swiperOption">        <swiper-slide v-for="slide in swiperSlides" :key="slide.id">I'm Slide {{ slide }}</swiper-slide>        <div class="swiper-pagination" slot="pagination"></div></swiper>

 

Data:

Export default {data () {return {swiperOption: {autoplay: true, // automatic pagination: {el :'. swiper-pagination '// page sharer }}, swiperSlides: [1, 2, 3] }}

The above provides basic carousel effects. For other effects, refer to Swiper's official API and set the parameter attributes in swiperOption.

Swiper4 API: http://www.swiper.com.cn/api/index.html

Vue-awesome-swiper API: https://www.npmjs.com/package/vue-awesome-swiper