Vue使用Swiper,鼠标、滚轮操作全屏切换
Swiper官网,查看API
因为Swiper鼠标控制存在BUG,只能控制一页切换,Vue-cli只能安装5.3.7新版本,所以手动安装依赖
安装4xx版本的Swiper可以正常演示
// 在项目文件内安装
npm install swiper@4.4.2 --save
安装Vue-awesome-swiper,操作Swiper
Vue-awesome-swiper官方文档
因为swiper使用的是4xx版本的,所以Vue-awesome-swiper也是用旧版本3.1.3,手动安装依赖
// 在项目文件内安装
npm install vue-awesome-swiper@3.1.3 --save
安装成功后,在项目main.js全局引入,并挂载
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
局部导入可以查看Vue-awesome-swiper官方文档
然后就是组件引用啦
<template>
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper