vue plug-in implements carousel chart on mobile terminal

This time I will bring you the vue plug-in to implement the mobile carousel chart. What are the precautions for the vue plug-in to implement the mobile carousel chart. The following is a practical case, let's take a look.

Sure enough, there are still a lot of plug-ins based on Vue, so I searched for vue-awesome-swiper, which is a carousel chart plug-in developed based on Vue and Swiper, but when I look at the API written, I always get a warning... ...or do your own research...

This article only applies to use in Vue scaffolding. CDN introduction and use refer to the last API link of the article.

Installation

npm

npm install vue-awesome-swiper --save

Introduction

Global introduction

Introduce in entry filemain.js

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

Local introduction

In the vue page that needs to use the carousel image Introduce

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

and add swiper

components:{
    swiper,
    swiperSlide
  }

in components using

html structure

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

data:

export default {
  data () {    return {
      swiperOption: {　　　　　
        autoplay:true,//自动切换
        pagination: {
          el: '.swiper-pagination'//分页器
        }
      },
      swiperSlides: [1, 2, 3]
    }
  }
｝

The above can achieve the basic carousel effect. For other effects, refer to Swiper official API and parameterize in swiperOption Attribute can be set.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Using flex layout

Input checkbox checkbox style modification

The above is the detailed content of vue plug-in implements carousel chart on mobile terminal. For more information, please follow other related articles on the PHP Chinese website!