Swiper5手机触摸滑动插件快速使用

Swiper插件官网

https://www.swiper.com.cn/

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</html>

2.HTML内容。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
     600px;
    height: 300px;
}

4.初始化Swiper：最好是挨着标签

...
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>
</body>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

<script>
window.onload = function() {
  ...
}
</script>

或者这样（Jquery和Zepto）(推荐)

<script>
$(document).ready(function () {
 ...
})
</script>

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。

如果作为CommonJs 或ES 模块引入

//CommonJs
var Swiper = require('swiper');    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

//ES
import Swiper from 'swiper';    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

如果要使用自定义方法，从API文档中查找具体使用方法
在这里插入图片描述

案例

使用swiper插件实现轮播图

swiper是一款功能强大的插件，可以实现很多我们意想不到的轮播效果。

1.在使用swiper之前首先要引入插件自带的样式和行为

     <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
    <script src="../css/swiper.min-3.js" type="text/javascript" charset="utf-8"></script>

引入swiper的布局结构类的命名不要随意改变因为该插件重类名不重结构

        <div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="../img/c0.jpg"/></div>
				<div class="swiper-slide"><img src="../img/c1.jpg"/></div>
				<div class="swiper-slide"><img src="../img/c2.jpg"/></div>
				<div class="swiper-slide"><img src="../img/c3.jpg"/></div>
				<div class="swiper-slide"><img src="../img/c4.jpg"/></div>
				<div class="swiper-slide"><img src="../img/c5.jpg"/>/div>
			</div>
		</div>
		<div class="swiper-pagination swiper-pagination-white"></div>
		<div class="swiper-button-prev swiper-button-white"></div>
		<div class="swiper-button-next swiper-button-white"></div>

3.最核心的东西在下面解释的已经相当详细不再过多赘述

    <script>
		//初始化 默认自适应
		var myswiper = new Swiper('.swiper-container',{
			autoplay:2000,//逗号结尾
			/*自动切换的时间间隔(单位ms),不写不自动切换
			类型:数字 默认是0
			*/
 
			initialSlide:0,
			/*
				设定初始化时的slide索引(默认显示第几张)
				类型:数字   
				索引从0开始
			*/
 
			direction:'horizontal',
			/*
			滑动的方向 可以是水平,垂直
			可选值horizontal,vertical
			*/
			
			speed:1000,
			/*
				滑动速度,自动滑动开始到结束的时间(ms)
				类型:数字    默认:300
				配合autoplay
			*/
 
			autoplayDisabledOninteraction:true,
			/*
			用户操作swiper,是否禁止autoplay
			操作:触碰 拖动 点击 (分页)
			默认是true  可选的值false
			*/
 
			autoplayStopOnLast:true,
			/*
				切换到最后一个slide停止自动切换
				ps:loop时无效
				默认:false不停
			*/
 
			grabCursor:true,
			/*
				鼠标指针形状(鼠标覆盖的时候是手,拖动的时候是抓手)
				可选值:true false
				默认:flase没有抓手
			
			*/
			//freeMode:true,
			effect:'slider',
			pagination:'.swiper-pagination',
 
 
			prevButton:'.swiper-button-prev',
			nextButton:'.swiper-button-next',
			loop:true,
		})
		//setInterval("mySwiper.slidePrev()",2000);
	</script>

4.完整代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
		<script src="../css/swiper.min-3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
		*{
			padding:0;
			margin:0;
		}
		.swiper-container{
			480px;
			height:270px;
			margin:50px auto;
		}
		.swiper-slide{
			line-height:300px;
			text-align:center;
			font-size:40px;
			background:aqua;	
		}
		.swiper-slide:nth-child(2){
			background:pink;
		}
		.swiper-slide:nth-child(3){
			background:yellow;
		}
		.swiper-slide:nth-child(4){
			background:lime;
		}
		.swiper-slide:nth-child(5){
			background:silver;
		}
		.swiper-slide:nth-child(6){
			background:purple;
		}
	</style>
	</head>
	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="../img/c0.jpg"/></div>
				<div class="swiper-slide"><img src="../img/c1.jpg"/></div>
				<div class="swiper-slide"><img src="../img/c2.jpg"/></div>
				<div class="swiper-slide"><img src="../img/c3.jpg"/></div>
				<div class="swiper-slide"><img src="../img/c4.jpg"/></div>
				<div class="swiper-slide"><img src="../img/c5.jpg"/>/div>
			</div>
		</div>
		<div class="swiper-pagination swiper-pagination-white"></div>
		<div class="swiper-button-prev swiper-button-white"></div>
		<div class="swiper-button-next swiper-button-white"></div>
	</body>
	<script>
		//初始化 默认自适应
		var myswiper = new Swiper('.swiper-container',{
			autoplay:2000,//逗号结尾
			/*自动切换的时间间隔(单位ms),不写不自动切换
			类型:数字 默认是0
			*/
 
			initialSlide:0,
			/*
				设定初始化时的slide索引(默认显示第几张)
				类型:数字   
				索引从0开始
			*/
 
			direction:'horizontal',
			/*
			滑动的方向 可以是水平,垂直
			可选值horizontal,vertical
			*/
			
			speed:1000,
			/*
				滑动速度,自动滑动开始到结束的时间(ms)
				类型:数字    默认:300
				配合autoplay
			*/
 
			autoplayDisabledOninteraction:true,
			/*
			用户操作swiper,是否禁止autoplay
			操作:触碰 拖动 点击 (分页)
			默认是true  可选的值false
			*/
 
			autoplayStopOnLast:true,
			/*
				切换到最后一个slide停止自动切换
				ps:loop时无效
				默认:false不停
			*/
 
			grabCursor:true,
			/*
				鼠标指针形状(鼠标覆盖的时候是手,拖动的时候是抓手)
				可选值:true false
				默认:flase没有抓手
			
			*/
			//freeMode:true,
			effect:'slider',
			pagination:'.swiper-pagination',
 
 
			prevButton:'.swiper-button-prev',
			nextButton:'.swiper-button-next',
			loop:true,
		})
		//setInterval("mySwiper.slidePrev()",2000);
	</script>
</html>

5.效果
在这里插入图片描述

解决使用 swiper 常见的问题

1 . swiper插件使用方法, 直接查看文档

swiper基础演示
swiper API文档

2.swiper近视初始化时, 其父级元素处于隐藏状态(display:none),会导致swiper初始化失败, 页面中的滚动效果有问题

解决方法1: 
 var mySwiper = myApp.swiper('.guest-wrapper',{
     observer: true,//修改swiper自己或子元素时，自动初始化swiper
     observeParents: true//修改swiper的父元素时，自动初始化swiper
 });
 
解决方法2: 
直接写死宽高
  var mySwiper = myApp.swiper('.guest-wrapper',{
     500,
     height:500
 });

3.滚动swiper插件中嵌套滚动插件, 要求子插件滚动全部完成后成能进行父元素的滚动 (swiper4 中滚动嵌套)

//外层的父级 swiper 初始化
window.window_swiper = new Swiper('.window_swiper_container', {
    speed: 800,
    mousewheel: true,
    simulateTouch: false,
    nested: true,
    on: {
 
        onSlideChangeStart: function(swiper) { //滑动父级需要激活滚轮事件
            swiper.enableMousewheelControl();
        }
 
    }
});
 
 
// 内层子 swiper 初始化(可用在多个子 swiper 上)
    var swiper = new Swiper('.{{ns}}-swiper', {
      simulateTouch: false,
      mousewheel: true,
      nested: true,
      on: {
        slideChangeTransitionStart: function () {
        //此处禁止 外层 swiper
          window.window_swiper.mousewheel.disable();
        },
        slideChangeTransitionEnd: function () {
          window.window_swiper.mousewheel.enable();
        }
      }
    });

4.swiper里面的图片懒加载与预加载, 可以使用自带的 lazyload 方法

swiper4 懒加载文档

设为true开启图片延迟加载默认值，使preloadImages无效。或者设置延迟加载选项。
 
图片延迟加载：需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
背景图延迟加载：载体增加属性data-background，并且增加类名swiper-lazy。
 
还可以加一个预加载，<div class="swiper-lazy-preloader"></div>
或者白色的<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
 
当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。
 
 
var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
  },
});

5 . 取消拖动最后一页或者第一页时的留白状态

resistanceRatio

抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。

6 . 移动端顶部长菜单超出隐藏

长菜单超出隐藏滚动切换

7.free模式/抵抗反弹 freeMode

默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。

8.最后一页的高度较小时的切换(最后一个页脚不是全高的页面展示)

var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 2,//'auto'
//slidesPerView : 3.7,
//如果设置为auto（例如制作全屏展示时的页脚部分），最后一个slide在键盘或鼠标滚动时可能会直接跳到倒数第三个slide，
//此时可以手动设置activeIndex解决，如下
  onTransitionEnd: function(swiper){
      if(swiper.progress==1){
          swiper.activeIndex=swiper.slides.length-1
      }
          }
})

9 .Effects (切换效果)

slide的切换效果，默认为"slide"（位移切换），可设置为"fade"（淡入）“cube”（方块）“coverflow”（3d流）“flip”（3d翻转）。

10.内容滚动(在ios下也能滚动的很流畅)

//css
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
         700px;
        height: 100%;
    }
    .swiper-slide {
        font-size: 18px;
        height: auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 30px;
        font-size:13px;font-family:microsoft yahei; line-height:1.8;
    }
    p{
    
        margin-bottom:1em;
    }
 
//html
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
               <p>无限多的内容无限多的内容无限多的内容无限多的内容</p>
            </div>
        </div>
        <!-- Add Scroll Bar -->
        <div class="swiper-scrollbar"></div>
    </div>
 
 
//js
    var swiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',     //滚动条的类名
        direction: 'vertical',      // 竖列排行
        slidesPerView: 'auto',      // 可同时展示多少个 slide 
        mousewheelControl: true,    //鼠标滚轮
        freeMode: true, // slide 是否贴合侧边
        roundLengths : true, //防止文字模糊
    });

11 . 想在轮播图外创建分页器、上一页和下一页的按钮(因为swiper的container默认overflow:hidden, 只能在轮播图中的可视区域显示切换菜单和上一页下一页)

独立分页元素，当启用（默认）并且分页元素的传入值为字符串时，swiper会优先查找子元素匹配这些元素。可应用于分页器，按钮和滚动条。

var mySwiper = new Swiper('.swiper-container',{
    pagination : '.swiper-pagination',
    uniqueNavElements :false,
})

相关阅读:
获取PeopleEditor控件中的用户或用户组
 关于PeopleEditor控件的SelectionSet属性
 SharePoint上禁用列表编辑（上）
SharePoint上禁用列表编辑（下）
Windows 7 证书导入工具
 一段奇怪的代码，可以用来检测杀毒软件
 在MyEclipse看到的消息，这应该是不能访问的真正原因了。
Windows 7 导入证书命令
 Windows Server 2008 R2 Standard DELL OEM
Netbeans 语言设置
原文地址：https://www.cnblogs.com/wjlbk/p/12633429.html