By a small case in how to use the swiper among vue

Vue official documentation: https://github.com/surmon-china/vue-awesome-swiper

swiper specific instructions: https: //www.swiper.com.cn/usage/index.html

swiper-animation specifically for use are: https: //www.swiper.com.cn/usage/animate/index.html

Download swiper

npm Download

npm install --save vue-awesome-swiper  animate.css

Global introduced main.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// 全局引入CSS
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

Small Case: banner chart

<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide class="style">I'm Slide 1</swiper-slide>
    <swiper-slide class="style">I'm Slide 2</swiper-slide>
    <swiper-slide class="style">I'm Slide 3</swiper-slide>
    <swiper-slide class="style">I'm Slide 4</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>
 
<script>
export default {
  name: "carrousel",
  data() {
    return {
      swiperOption: {
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // 可点击的分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          clickableClass: "my-pagination-clickable"
        },
        // 自动播放
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        // 鼠标点击左右切换按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          hideOnClick: true
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    this.fun();
  },
  methods: {
    fun() {
      // eslint-disable-next-line no-console
      console.log(this.swiper);
    },
    callback() {}
  }
};
</script>

<style>
.swiper-container {
  --swiper-theme-color: #ff6600;
  --swiper-pagination-color: #00ff33; /* 两种都可以 */
}
.style {
    box-sizing: border-box;
    border: red 1px solid;
    line-height: 300px;
}
</style>