一.简介
Swiper常用于移动端网站的内容触摸滑动
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
下载安装
1. 选用npm下载安装
项目目录
win7下,cmd终端,进入根目录,cnpm install vue-awesome-swiper@2.6.7 --save
我的网速慢,使用cnpm代替npm,@2.6.7表示安装的版本,--save本地测试还是项目上线,都会用到vue-awesome-swiper@2.6.7
安装完成后,在项目的node_modules目录下会找到
2.使用
全局挂载:import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// require stylesimport 'swiper/dist/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default global options } */)
组件挂载// require stylesimport 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'export default { components: {
swiper,
swiperSlide
}
}
由于我们要在很多地方用到该插件,选用全局方式,把上述全局代码复制到src/main.js中
2.SPA在单页面开发中的应用
新建一个.vue文件,按照以下代码模式更改
I'm Slide 1
I'm Slide 2
I'm Slide 3
I'm Slide 4
I'm Slide 5
I'm Slide 6
I'm Slide 7
export default { name: 'carrousel',
data() { return { swiperOption: { // some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
}
}, computed: {
swiper() { return this.$refs.mySwiper.swiper
}
},
mounted() { // current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log('this is current swiper instance object', this.swiper) this.swiper.slideTo(3, 1000, false)
}
}
例如:
作者:fenerchen
链接:https://www.jianshu.com/p/c4925ef55eaa