parameter name | Types of | Required | description |
---|---|---|---|
swiperContainer | HTMLElement or string | required | Swiper container css selector, e.g.".swiper-container" |
parameters | object | Optional | Personalized Swiper configuration |
A plurality Swiper page references, each container can add to or Class ID distinction to keep the default class name swiper- Container. The HTML <div class = "Swiper-Container" ID = "swiper1"> .... <div> <div class = "Swiper-Container" ID = "swiper2"> .... <div> <div class = " Container-Swiper "ID =" swiper3 "> .... <div> the JS var swiper1 = new new Swiper ( '# swiper1' ); var swiper2 = new new Swiper ( '# swiper2' ); var swiper3 = new new Swiper ( '# swiper3 ');
Keyword
使用方法示例
<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,//可选选项,自动滑动
initialSlide :2,//默认位置
direction : 'vertical',
//横向 vertical:竖向切换
speed:300,//动画完成时间 autoplay : { delay:3000 },//切换一次动画时间
grabCursor : true,
//鼠标移上变成小手
})
</script>