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的更多相关文章

  1. 轮播插件swiper

    使用步骤 1.引用js <script src="swiper/swiper.min.js" type="text/javascript" charset ...

  2. SuperSlide轮播插件滚动高度或宽度不对的问题解决

    声明:本文由w3h5原创,转载请注明出处:<SuperSlide轮播插件滚动高度或宽度不对的问题解决> SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Ta ...

  3. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  4. 12款 jquery轮播插件

    Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...

  5. 推荐:图片轮播插件Nivo Slider

          因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是,这款插件是在MIT协议下免费的.        ...

  6. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  7. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  8. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  9. 图片轮播插件Nivo Slider

    推荐:图片轮播插件Nivo Slider         因为项目需要一款切换样式多一些的轮播插件,不经意找到了NivoSlider,非常好用,比bootstrap要好用,而且样式丰富.值得注意的是, ...

随机推荐

  1. javaScript事件(七)事件类型之键盘与文本事件

    键盘事件如下: keydown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件. keypress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件. k ...

  2. windows下面使用nssm设置新的服务实现开机自启等

    1.下载: http://nssm.cc/download/?page=download 2.解压: 根据自己的系统选择相应的32bit或者64bit,然后将相应的可执行文件拷贝到系统环境中.配置环境 ...

  3. Mac mumu模拟器设置代理

    adb devices adb connect 127.0.0.1:5555 adb shell am start -a android.intent.action.MAIN -n com.andro ...

  4. ELK+Redis+Nginx服务数据存储以及Nginx日志的收集

    PS:此片文章是承接上篇ELK部署文档,再次便不详细说明了 [安装Redis] [root@Redis ~]# wget  http://download.redis.io/releases/redi ...

  5. BZOJ4816 [Sdoi2017]数字表格 数论 莫比乌斯反演

    原文链接http://www.cnblogs.com/zhouzhendong/p/8666106.html 题目传送门 - BZOJ4816 题意 定义$f(0)=0,f(1)=1,f(i)=f(i ...

  6. Codechef CHSIGN Change the Signs(May Challenge 2018) 动态规划

    原文链接http://www.cnblogs.com/zhouzhendong/p/9004583.html 题目传送门 - Codechef CHSIGN 题意 第一行,一个数$T$,表示数据组数. ...

  7. Vijos1755 靶形数独 Sudoku NOIP2009 提高组 T4 舞蹈链 DLX

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目(传送门) 题意概括 给出一个残缺的数独,求这个数独中所有的解法中的最大价值. 一个数独解法的价值之和为每个位置所填的数值 ...

  8. day42 事物,数据库锁

    事物是把一些sql语句作为一个原子性操作,就是说我会写好几条sql语句,然后我想把这好几条的sql语句作为一个整体,然后让这个整体一起去运行,不可以拆分开,就像我们用面粉做一个馒头一样,我需要把这些面 ...

  9. js里面的判断最好做到完全控制

    <li class="item"> <div id="zcdz" name="zcdz" class="mini ...

  10. javascipt

    JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Net ...