前端swiper使用指南

swiper 在网页中常用的方法

1、使用时在页面引入

<link rel="stylesheet" href="front/css/swiper.min.css">
<script src="front/js/swiper.jquery.min.js"></script>

2、基本结构

<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: 5000,//可选选项，自动滑动
})
</script>

基本方法

loop: false,  //是否循环
autoplay: 0,  //是否自动播放
slidesPerView : 4,  //可视区域显示几个
spaceBetween : 10, //可是区域显示的超过一张时，设置之间的距离
 // 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
onlyExternal: true,
direction: 'vertical',  // 控制上下滚动还是左右滚动

 

显示都点

<div class="swiper-pagination"></div>

pagination : '.swiper-pagination',
//都点的样式可查选官方文档

显示左右切换按钮

 <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
 
 
 <!-- 修改箭头颜色示范 -->
 <div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
 <div class="swiper-button-next swiper-button-black"></div> <!-- 黑色 -->
 <style>
 /*其他颜色需更改css样式 007aff */
 .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
 </style>

 

swiper滑动东特定某一页

mySwiper.slideTo(2, 1000, false);

第一个参数，滑动到特定页码的下标，第二个参数，滑动时间，第三个参数滑动到下表指定页码之后是否触发回调。

 

3d swiper 地址，包括移动端自适应。