H5页面轮播图插件
来源:互联网 发布:淘宝秒杀群怎么建立 编辑:程序博客网 时间:2024/05/18 00:51
插件名称:Swiper
官网:http://www.swiper.com.cn/
依赖:
<link rel="stylesheet" href="path/to/swiper.min.css"><script src="path/to/swiper.min.js"></script>//若已经引入jQuery,可以用swiper.jquery.min.js
使用:
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div></div>
<script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.swiper-scrollbar', }) </script></body>
参数:见官网API文档。
阅读全文
0 0
- H5页面轮播图插件
- h5页面
- H5页面
- H5及H5页面是什么意思?如何制作H5页面?
- H5无插件范式
- H5图片上传插件
- H5播放视频插件
- H5+推送插件开发
- h5页面引用idangerous.swiper.js 插件兼容ios和android出现的问题
- H5页面测试总结
- H5页面性能优化
- h5页面设计-1
- h5页面-1
- h5页面-2
- 第一个h5页面
- H5页面设计
- H5页面设计
- H5页面设计
- Object Relational Mapping (ORM) Data Access
- 数据结构实验之栈与队列二:一般算术表达式转换成后缀式
- Python入门基础之条件循环语句(二)
- 通配符的匹配很全面, 但无法找到元素 'aop:config' 的声明
- 用python发送邮件 smtp
- H5页面轮播图插件
- MediaPlayer: start called in state 0报错处理
- CommonJS语法中的require寻找‘包’的规则
- margin和padding的高级用法
- 数据结构实验之串三:KMP应用
- ubuntu 16.04安装后只有一个分辨率,无法用xrandr命令也无法修改xorg.conf(已解决)
- windows上php安装扩展遇到的坑
- 安卓学习笔记(9)-文件共享到其他应用
- Android Retrofit2.0 查看log和JSON字符串(HttpLoggingInterceptor)