一款好用的轮播插件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要好用,而且样式丰富.值得注意的是, ...
随机推荐
- 执行shell文件是,提示chmod: 更改'./shell1.sh' 的权限: 不允许的操作。
- BZOJ 2989: 数列/4170: 极光
题解: n倍经验题 首先比较容易想到的是对绝对值分类讨论 然后是4维偏序 1.查询和修改顺序 2.x>y 3.a[x]>a[y] 4.(x+a[x])-(y+a[y])<=k 这样是 ...
- 【转载】WIN7访问共享:0x80070035 找不到网络路径解决方法
转载:http://blog.chinaunix.net/uid-12372814-id-3518571.html 昨天刚装WIN7系统,今天早上准备访问服务器安装些软件,结果出现网络错误,提示Win ...
- Python_logging模块
日志:方便用户了解系统.软件或应用的运行情况,及时发现问题并快速定位.解决问题. 一个日志信息对应的是一个事件的发生,而一个事件需要包括的几个内容: 事件发生时间 事件发生位置 事件发生严重程度(日志 ...
- tomcat配置后台管理监控页面
- mysql-索引-日志
索引:基于元数据之上的在某个字段或多个字段取出来,索引是加速读操作的,但对写操作时有副作用的 BTree 索引:抽取出来重新排序,是左前缀索引每一个叶子结点到根结点的距离相同: 哈希索引:基于键查找值 ...
- PHP远程下载图片,微信头像存到本地,本地图片转base64
方法一(推荐): function download_remote_pic($url){ $header = [ 'User-Agent: Mozilla/5.0 (Windows NT 6.1; W ...
- mysql解决数据库死锁问题
为了保证数据的正确性,对数据库进行操作的时候都会进行上锁,也就是进行修改数据的时候同一时间只能有一个进程,当这个进程处理完了,释放锁了,其他进程才可以进行操作! 总是会碰见一些意外情况,导致数据库死锁 ...
- day16 函数的用法:内置函数,匿名函数
思维导图需要补全 : 一共有68个内置函数: #内置:python自带 # def func(): # a = 1 # b = 2 # print(locals()) # print(globals( ...
- Manjaro (KDE)安装踩坑记录
1.如果双显卡无法安装系统可以进如BIOS屏蔽显卡后进入安装 2.如果安装kde版本后容易冻屏.死机,可以尝试安装闭源驱动 3.如果出现resolving time out 10000ms 这样的问题 ...