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

叁歲伎倆 2023-06-24 09:25 2阅读 0赞

# 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 { 
        width: 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内容的后面，则需要在页面加载完成后再初始化。

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

### 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文档中查找具体使用方法  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]

## 案例 ##

### 使用swiper插件实现轮播图 ###

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

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

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

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

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{ 
    			width: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.效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20181229194608787.gif]

## 解决使用 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',{ 
         width: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 { 
            width: 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>
            
            <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,
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191222145551864.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191222150013229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L215X25ld193YXk=,size_16,color_FFFFFF,t_70
[20181229194608787.gif]: https://img-blog.csdnimg.cn/20181229194608787.gif