1 官网
https://www.swiper.com.cn/api/start/new.html
2 初始化方式
2.1 原生
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,//可选选项，自动滑动
})
//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
new Swiper('.swiper-container')
var mySwiper = document.querySelector('.swiper-container').swiper
mySwiper.slideNext();
</script>
动态修改swiper的属性，如下：
<script>
var mySwiper = new Swiper('.swiper-container',{
autoplay : 1000,
autoplayDisableOnInteraction : false,
})
$('#btn1').click(function(){
mySwiper.params.autoplay=200;
})
</script>
2.2 Vue-Awesome-Swiper 组件方式
https://github.com/surmon-china/vue-awesome-swiper
2.2.1 安装
1 Install
1.1 CDN
<link rel="stylesheet" href="path/to/swiper/dist/css/swiper.css"/>
<script type="text/javascript" src="path/to/swiper.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-swiper.js"></script>
<script type="text/javascript">
Vue.use(window.VueAwesomeSwiper)
</script>
1.2 NPM
npm install vue-awesome-swiper --save
1.3 Mount
1.3.1 mount with global
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
1.3.2 mount with component
// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
1.3.3 mount with ssr
// If used in nuxt.js/ssr, you should keep it only in browser build environment
if (process.browser) {
const VueAwesomeSwiper = require('vue-awesome-swiper/dist/ssr')
Vue.use(VueAwesomeSwiper)
}
custom swiper plugin
import Swiper from 'swiper'
Swiper.use({
name: 'pluginName',
params: {
pluginSwitch: false,
},
on: {
init() {
if (!this.params.pluginSwitch) return
console.log('init')
},
// swiper callback...
}
})
2.2.2 初始化方式
<!-- The ref attr used to find the swiper instance -->
<template>
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</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>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
}
},
computed: {
customswiper() {
// <swiper :options="swiperOption" ref="mySwiper"
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log('this is current swiper instance object', this.customswiper)
// <swiper :options="swiperOption" ref="mySwiper"
this.customswiper.slideTo(3, 1000, false)
}
}
</script>
动态修改swiper的属性，如下：
// <swiper :options="swiperOption" ref="mySwiper"
/* computed: {
customswiper() {
// <swiper :options="swiperOption" ref="mySwiper"
return this.$refs.mySwiper.swiper
}
}
*/
this.customswiper.params.autoplay=200;