一款好用的轮播插件swiper,适用于移动端和web
swiper的dom布局
<div id="commentsSwiper" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">滚动的item</div>
</div>
</div>
注意:第一层div元素用来初始化swiper,所以class可自定义,第二层和第三层中dom的class必须含有这两个固定的样式,可以增加其他的自定义样式。
swiper的初始化
new jSwiper('#commentsSwiper', {
direction: 'vertical',
noSwiping: 'true',
loop: true,
autoplay: ,
speed: ,
autoplayDisableOnInteraction: false //当手动滑动后,依然保持自动轮播
});
注意:
1、container,wrapper,slider里面的样式一定不能有padding,或者是margin,否则滑动到最后一个的时候会被反弹回去,最后一个图片显示不出来;
2、如果初始化后在页面上的轮播没有效果,请检查下,轮播里面的图片是否是接口获取的,同时一定要保证图片渲染完成后再去初始化轮播插件;
一些具体的可以看 https://www.swiper.com.cn/api/grid/27.html
一款好用的轮播插件swiper,适用于移动端和web的更多相关文章
- 轮播插件swiper
使用步骤 1.引用js <script src="swiper/swiper.min.js" type="text/javascript" charset ...
- SuperSlide轮播插件滚动高度或宽度不对的问题解决
声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
- 推荐:图片轮播插件Nivo Slider
因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的. ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 图片轮播插件Nivo Slider
推荐:图片轮播插件Nivo Slider 因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...
随机推荐
- WCF 寄宿Windows以及控制台启动
一:添加windows服务 二:修改XXXInstaller1的StartType=Automatic,修改ProcessInstaller1的Account=LocalSystem 三:在progr ...
- Encountered IOException running import job: org.apache.hadoop.mapred.FileAlreadyExistsException: Output directory hdfs://slaver1:9000/user/hadoop/tb_user already exists
1.当时初学Sqoop的时候,mysql导入到hdfs导入命令执行以后,在hdfs上面没有找到对应的数据,今天根据这个bug,顺便解决这个问题吧,之前写的http://www.cnblogs.com/ ...
- OpenJDK-study-001 windows上安装Mercurial 4.4.1 克隆OPENJDK版本库
下载安装 1.下载Mercurial 进入https://www.mercurial-scm.org/wiki/Mercurial下载,windows上傻瓜式安装的,安装好之后,命令行进入安装目录, ...
- js 给定时间,如'2013-08-30',换算和今天的天数差
由于项目中需要用到给定时间格式,如'2013-08-30',需要计算其和当前时间的间隔,需要算出间隔的时间,自己在网上搜索,并做了下简单的整理,总体思路分3步:1.将给定的时间和当前时间转换为毫秒 2 ...
- 【BZOJ4155】[Ipsc2015]Humble Captains
题解: 第一问裸的最小割 第二问考虑贪心 我们把边权平均分配给两个点 然后就变成了给n个数分两组差最小 np-hard问题 暴力背包,操作存在区间左移,右移,or bieset优化
- 【Android】spannableStringBuilder
EditText: 通常用于显示文字,但有时候也需要在文字中夹杂一些图片,比如QQ中就可以使用表情图片,又比如需要的文字高亮显示等等,如何在android中也做到这样呢? 记得android中有个an ...
- 【Android】ImageView ScaleType属性值
ImageView.ScaleType / android:scaleType值的意义区别: CENTER /center 按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的 ...
- ui-router实现返回上一页功能
angular.module('ConsoleUIApp', ['ui.router','ui.bootstrap']) .config(function ($stateProvider, $urlR ...
- SpringBoot Controller接收参数的几种常用方
第一类:请求路径参数 1.@PathVariable 获取路径参数.即url/{id}这种形式. 2.@RequestParam 获取查询参数.即url?name=这种形式 例子 GET http:/ ...
- 51Nod1626 B君的梦境 状压dp 矩阵
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1626.html 题目传送门 - 51Nod1626 题意 题解 首先考虑形象的想象本题中的思维空间. ...