swiper basic use

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>

 

Guess you like

Origin www.cnblogs.com/xiaozhang666/p/11419640.html