一款好用的轮播插件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要好用,而且样式丰富.值得注意的是, ...
随机推荐
- 用vi编辑文件
原文:https://www.ibm.com/developerworks/library/l-lpic1-103-8/index.html Overview In this article, lea ...
- 【AtCoder】Tenka1 Programmer Contest 2019
Tenka1 Programmer Contest 2019 C - Stones 题面大意:有一个01序列,改变一个位置上的值花费1,问变成没有0在1右边的序列花费最少多少 直接枚举前i个都变成0即 ...
- Flink的Windows
在讲解windows的众多操作之前,需要讲解一个概念: 源源不断的数据流是无法进行统计工作的,因为数据流没有边界,就无法统计到底有多少数据经过了这个流.也无法统计数据流中的最大值,最小值,平均值,累加 ...
- day3.python字符串格式化
字符串格式化 注意:若在格式化输出中还需要再加%,需要两个%来代替 方法1:%控制格式化输出 例1: print("I'm %s. I'm %d year old" % ('Vam ...
- jQuery懒加载插件 – jquery.lazyload.js简单调用
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 关闭PHP的opcache缓存
1.使用phpinfo();查看配置信息 2.搜索Additional .ini files parsed 3.查看opcache安装目录 4.打开文件将 opcache.enable=1 改成 ...
- 非root用户下实现SSH免密码登录
1.创建公钥.公钥 ssh-keygen -t rsa 无视它出来的任何提示,欢快的一路回车到底吧. 2.把公钥 id_rsa.pub 复制到远程机器的 /home/username/.ssh目录 并 ...
- chrome刷新CSS
改动CSS发现页面根本没有变化,再三查看确实是这一处CSS,那么可能的就是浏览器缓存了CSS而刷新无效了. chrome刷新CSS: 方法1:直接ctrl+F5,进行强制刷新页面,浏览器会重新加载所有 ...
- 001.Redis简介及安装
一 Redis简介 1.1 Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key-value 缓存产品有以下三个特点: ...
- Tomcat v9.0 Could not publish to the server. java.lang.IndexOutOfBoundsException
今天使用Tomcat启动一个java项目,出现报错: Could not publish to the server. java.lang.IndexOutOfBoundsException 众寻之下 ...