(网页)swiper.js轮播图插件
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 </div>
<div class="swiper-slide">Slide </div>
<div class="swiper-slide">Slide </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:
});
</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 == ){
$("#content").text(data.comment.c_content);
$(".swiper-wrapper").html('');
var html = '';
var images = data.comment.images;
for (var i=; i < images.length; i++) {
html += "<div class='swiper-slide'><img src=__ROOT__/" + images[i]['thumb_image'] + "></div>";
}
$(".swiper-wrapper").html(html); //swiper已动态生成
//实例化swiper
var swiper = new Swiper('.nav .swiper-container', {
pagination: '.nav .swiper-pagination',
paginationClickable: true,
centeredSlides: true,
autoplay: false,
autoplayDisableOnInteraction: false,
paginationType: 'fraction',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
loop: 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: ,
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/
(网页)swiper.js轮播图插件的更多相关文章
- jquery, js轮播图插件Swiper3
轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...
- 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）
SuperSlide 2 轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...
- 封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
- 原生JavaScript（js）手把手教你写轮播图插件（banner）
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
- js 原生轮播图插件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- vue轮播图插件vue-awesome-swiper的使用与组件化
不管是APP还是移动端网页开发,轮播图在大部分项目当中都是存在的,这时候如果用vue开发项目,选择一款好的插件并且封装好是很重要的 1. 推荐使用vue-awesome-swiper 安装:cnpm ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
随机推荐
- parseInt和map方法使用案例分析
["1","2","3"].map(parseInt) //[1,NaN,NaN] 先看map()方法 定义和用法 map() 方法返回一个 ...
- JavaScript逗号操作符
今天在CSDN看到一篇文章http://www.csdn.net/article/2014-01-06/2818025-Useful-JavaScript-Tips-Best-Practices?re ...
- html标签详解（2）
http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...
- MySQL GTID你知多少
MySQL在5.6的版本推出了GTID复制,相比传统的复制,GTID复制对于运维更加友好,这个事务是谁产⽣,产⽣多少事务,⾮常直接的标识出来,当然GTID也有限制,对于什么是GTID可以参考我之前的文 ...
- 90 行 Python 搭一个音乐搜索工具
之前一段时间读到了这篇博客,其中描述了作者如何用java实现国外著名音乐搜索工具shazam的基本功能.其中所提到的文章又将我引向了关于shazam的一篇论文及另外一篇博客.读完之后发现其中的原理并不 ...
- python字符串类型
python中的字符串 python中的字符串类型为str,也是平时操作的类型.但除了str类型,还有一个专门的名为"string"的模块(导入即可知),是很早以前没有str类型的 ...
- CSS定位概述
CSS中有三种基本的定位机制:普通流,浮动和绝对定位. 1.相对定位:relative 如果对一个元素进行相对定位,它将出现在它所在的位置上,然后可以通过设置垂直或者水平位置,让这个元素“相对于” ...
- 设置TabWidget的样式的方法、关联Fragment与tabwidget的方法、点击tab显示相应Fragment方法
private void updateTabHost(TabHost tabHost) { int count = tabHost.getTabWidget().getChildCount(); ; ...
- 【转载】PhpStudy修改网站根目录
phpStudy是一个PHP调试环境的程序集成包.该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装,无须配置即可使用,是非常方便.好用的 ...
- .NET Framework 平台构造基础
CLR 公共语言运行库 执行给定编译代码单元所需的外部服务集合,它提供了一个定义明确的运行库层,可以被支持.NET的所有语言和平台所共享. 库 mscoree.dll:公共对象运行库执行引擎 当用户程 ...