一、说明
vue-awesome-swiper是基于swiper的,安装不同版本的vue-awesome-swiper对应不同的swiper,所以swiper里面的属性多数能应用到vue-awesome-swiper中,也可以根据swiper文档来设置vue-awesome-swiper属性;
swiper挂网:https://www.swiper.com.cn/,本次使用的版本"vue-awesome-swiper": "^3.1.3"
二、安装
npm install vue-awesome-swiper@3.1.3 --save//指定安装版本
npm install vue-awesome-swiper --save // 默认安装最新的
三、引入
引入有两种方式
1.在main.js文件中全局引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
2.在组件中引入
import {
swiper, swiperSlide } from "vue-awesome-swiper";
require("swiper/dist/css/swiper.css");
export default {
name: "swiper",
components:{
swiper,
swiperSlide
}
四、轮播图
<template>
<div