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. Centos7+ASP.Net Core 运行

    一:ASP.Net Core跨平台运行,需要在Linux安装运行环境.本机器使用的Centos,下载安装地址为:https://www.microsoft.com/net/core#centos su ...

  2. python---自己来打通节点,链表,栈,应用

    但,, 没有调试通过. 思路是对的,立此存照. 关键就是用链表完全实现列表的功能, 替换了就应该OK的. # coding = utf-8 # 节点初始化 class Node: def __init ...

  3. P4715 「英语」Z 语言

    题解: 平衡树维护hash值 为了支持加入删除操作 x*base^y 其中y为他是第k大 同一般的维护方法,我们不用对每个节点维护他的hash值 而是只用记录他的x值(他的位置) 然后通过updata ...

  4. net core体系-web应用程序-4net core2.0大白话带你入门-7asp.net core日志组件(Logger和Nlog)

    asp.net core日志组件   日志介绍 Logging的使用 1. appsettings.json中Logging的介绍 Logging的配置信息是保存在appsettings.json配置 ...

  5. 将程序sublime添加到右键菜单中

    新建wangzhaobo.bat复制一下代码, 粘贴保存,然后打开. @echo Off :START CLS echo *====================================== ...

  6. 2、Qt Project之鼠标事件监控

    鼠标事件监控: 对于鼠标时间监控的相关操作,我们在简历工程的时候需要选择的是QWidget基类,不选择QMainWindow基类,如下所示: Base class:QWidget Step1:我们首先 ...

  7. Scala-Unit6-final/type关键字、样例类&样例对象

    一.关键字 1.final关键字 用final修饰的类:不能被继承 用final修饰的方法:不能被重写 注意:(1)在Scala中变量不需要用final修饰,因为val与var已经限制了变量是否可变 ...

  8. Working out(DP)

    题目描述: 题意: 有n*m个格子, 走过一个格子可以得到相应的分数. A 从(1,1)沿 下 或 右 走到(n,m) B 从(n,1)沿 上 或 右 走到(1,m) 两人路径有且只能有一个格子重合( ...

  9. Mysql漂流系列(一):MySQL的执行流程

    MySQL的执行流程 MySQL的执行流程: MySQL的执行流程分析: 1.当我们请求mysql服务器的时候,MySQL前端会有一个监听,请求到了之后,服务器得到相关的SQL语句,执行之前(虚线部分 ...

  10. Django模板之通用模板的使用

    Django模板之通用模板的使用 转载:https://code.ziqiangxuetang.com/django/django-template.html 我们做网站有一些通用的部分,比如 导航, ...