Swiper4.x使用方法

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

<!DOCTYPE html>
<html>
<head>...<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>...<script src="path/to/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：最好是挨着</body>标签

<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 type="text/javascript">
window.onload = function() {...
}
</script>

或者这样（Jquery和Zepto）

<script type="text/javascript">
$(document).ready(function () {...
})
</script>

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

swiper坑

1.一个页面引用多个swiper插件，出现混乱问题；

　　解决方法： 1.实例化swiper时加上其父元素加以区分

　　　　　　　 2.Swiper加上ID或Class区分，要保留默认的类名swiper-container

　　如下：

<script>var swiper = new Swiper('.course_banner2 .swiper-container', {pagination: '.course_banner2 .swiper-pagination',paginationClickable: true,loop: true,autoplay: 2500});</script>

2. swiper隐藏之后，再显示，滑动不流畅，且无限滑动会失败；

　　解决方法：添加一下两个属性　　　

　　　　observer: true,//修改swiper自己或子元素时，自动初始化swiper
　　　　observeParents: true,//修改swiper的父元素时，自动初始化swiper

3.动态生成的swiper，如append()，或html()添加的，无限滑动效果失败；

　　解决方法：

　　　　a. 添加上面两个属性

　　　　b.把swiper方法写在动态生成的方法里面

　　如下所示：

function bigPic(comment_id) {$('.win_pic').show();$.post("{:U('Course/ajaxComment')}", {'c_id':comment_id}, function(data){if(data.status == 1){$("#content").text(data.comment.c_content);$(".swiper-wrapper").html('');var html = '';var images = data.comment.images;for (var i=0; i < images.length; i  ) {html  = "<div class='swiper-slide'><img src=__ROOT__/"   images[i]['thumb_image']   "></div>";                    }$(".swiper-wrapper").html(html); //swiper已动态生成//实例化swipervar swiper = new Swiper('.nav .swiper-container', {pagination: '.nav .swiper-pagination',paginationClickable: true,centeredSlides: true,autoplay: false,autoplayDisableOnInteraction: false,paginationType: 'fraction',observer: true,//修改swiper自己或子元素时，自动初始化swiperobserveParents: true,//修改swiper的父元素时，自动初始化swiperloop: true,paginationFractionRender: function(swiper, currentClassName, totalClassName) {return '<span class="'   currentClassName   '"></span>'  '/'  '<span class="'   totalClassName   '"></span>';}})}console.log(data);}, "json");}

4.移动端使用swiper需加onTouchStart、onTouchEnd，下拉时轮播停止BUG。（针对 apicloud 开发)

var swiper = new Swiper('.swiper-container', {pagination: '.swiper-pagination',loop: true,paginationClickable: true,centeredSlides: true,autoplay: 2500,autoplayDisableOnInteraction: false,onTouchStart: function(swiper) {api.setFrameAttr({name: api.frameName,bounces: false});},onTouchEnd: function(swiper) {api.setFrameAttr({name: api.frameName,bounces: true});}});

官网网址:http://www.swiper.com.cn/

更多专业前端知识，请上【猿2048】www.mk2048.com

(网页)swiper.js轮播图插件相关推荐

html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法安装: /* y ...
html轮播图循环效果,TremulaJS-跨设备多功能的无限循环js轮播图插件
TremulaJS是一款非常酷的跨设备多功能的无限循环js轮播图插件.TremulaJS是一个客户端javascript UI组件,它基于贝兹曲线和物理动量效应制作各种效果,可以制作无限循环的图片流, ...
自己写的原生js轮播图插件
时间有限,功能有待完善 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
html文字图片一起轮播卡片,简单的堆叠卡片样式jQuery轮播图插件
MxSlider.js是一款堆叠卡片样式的jQuery响应式轮播图插件.该轮播图插件兼容IE8浏览器,采用响应式设计,它在图片切换时,就像一叠扑克牌将最上面一张挪开的效果. 使用方法在页面中引入Mx ...
响应式html轮播图,最简单的响应式jQuery轮播图插件
easySlider.js是一款轻量级.简单易用的响应式jQuery轮播图插件.easySlider.js可以根据视口的大小来动态修改轮播图的尺寸.它压缩后的版本仅5K大小,简单实用. 使用方法在页 ...
轮播图插件--swiper
轮播图插件swiper下载方式输入网址:https://www.swiper.com.cn/ 进入官网,点击 "获取Swiper" >点击 "下载Swiper&q ...
Vue —— mockjs 模拟数据、轮播图插件 Swiper
mockjs 的使用项目安装 mockjs : cnpm install mockjs 使用步骤 (1)在项目 src 下创建 mock 文件夹. (2)mock 文件夹准备相应的 JSON 数据文 ...
php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js
在zblogPHP主题 yunduan 上使用这个轮播幻灯片插件jquery.flexslider.js,分享下使用方法: 这是一款jquery全屏响应式淡入淡出效果轮播图插件.该轮播图插件简单实用, ...
轮播图插件（swiper）
今天给新手介绍一个轮播图插件--swiper 首先要引用swiper.min.css和swiper.min.js. 页面代码 <div class="swiper-container& ...

(网页)swiper.js轮播图插件

Swiper4.x使用方法

(网页)swiper.js轮播图插件相关推荐

最新文章

热门文章