swiper的使用教程
swiper的使用教程
今天要分享的是swiper这个插件的使用,什么是swiper呢?
Swiper常用于移动端网站的内容触摸滑动;
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
初学者使用swiper的时候,可以在官网(http://www.swiper.com.cn/)学,但是一开始的时候,建议不要直接看它的API文档。可以在先下载swiper,选择swiper-3.4.2完整压缩包下载,然后可以看它里面demos中的效果,你需要哪个效果,就用哪个!
使用方法(以其中demos中第21个效果为例):
1、引用JS和css文件
- <link rel="stylesheet" href="path/to/swiper.min.css">
- <script src="path/to/swiper.min.js"></script>
2、在body中加入以下格式的HTML格式
- <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>
- 导航等组件可以放在container之外
3、在script中加入以下js代码
- <script>
- var swiper = new Swiper('.swiper-container', {
- pagination: '.swiper-pagination',
- nextButton: '.swiper-button-next',
- prevButton: '.swiper-button-prev',
- paginationClickable: true,
- spaceBetween: 30,
- centeredSlides: true,
- autoplay: 2500,
- autoplayDisableOnInteraction: false
- });
- </script>
4、在head中加入css样式
- <style>
- html, body {
- position: relative;
- height: 100%;
- }
- body {
- background: #eee;
- font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
- font-size: 14px;
- color:#000;
- margin: 0;
- padding: 0;
- }
- .swiper-container {
- width: 100%;
- height: 100%;
- }
- .swiper-slide {
- text-align: center;
- font-size: 18px;
- background: #fff;
- /* Center slide text vertically */
- display: -webkit-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- }
- </style>
至此就完成了一个简单的轮播,然后还有先script中要加的参数,我们可以在API文档中进行查阅,并添加。
注意的是:HTML中class的名字不能换,不要问为什么,就是那样用就OK了!
原创来自:http://blog.csdn.net/cq7421/article/details/77937080
swiper的使用教程相关推荐
- html5 swiper 菜鸟,前端插件swiper使用新手教程
1.引入swiper.min.js和swiper.min.css两个文件,文件百度网盘下载地址链接:https://pan.baidu.com/s/1KwIzPfe9hFpSiMr5GqAWxw 提取 ...
- 前端插件swiper使用新手教程
1.引入swiper.min.js和swiper.min.css两个文件,文件百度网盘下载地址链接:https://pan.baidu.com/s/1KwIzPfe9hFpSiMr5GqAWxw 提取 ...
- vue3中使用swiper完整版教程
介绍 在 vue3 中使用 swiper, 实现轮播图的效果:如果组件样式等模块引入不当,很有可能导致,页面无效果:或者想要的箭头或者切换效果异常问题.具体使用方式如下所示: 使用方式 使用命令 np ...
- swiper组件如何自定义分页符和前进后退按钮
前提 今天产品提了这样一个需求:用户在首次登录后,要展示一个引流的轮播图,其内容主要是对新功能的图文说明(类似于王者荣耀每次更新时的内容一览轮播图,如下图所示).如果非首次登录,则让它隐藏掉即可.注: ...
- Swiper插件 下载及使用教程
首先附上官网地址:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 1. 进入官网,进入使用方法的页面: 2.下载插件压缩包: 下载方法一:点击"Swiper文件"下载插 ...
- php图片轮换功能,微信小程swiper组件实现图片轮播切换功能教程
本文主要介绍了微信小程使用swiper组件实现图片轮播切换显示功能,涉及swiper组件相关属性使用技巧,希望能帮助到大家. 1.效果展示 2.关键代码 index.wxml: swiper组件属性说 ...
- Vue2系列教程——Swiper插件的使用
Vue2 Swiper插件的使用 安装swiper 6.7.1 npm install swiper@6.7.1 --save npm install vue-awesome-swiper --sav ...
- Swiper 在网页开发中运用——简易教程
Swper 初级使用 1导入两个文件在head部分 <script src="js/swiper/swiper.min.js"></script><l ...
- 微信小程序 swiper和weiper-itme组件的基本使用,微信小程序轮播图这么做教程
1.swiper组件是干嘛的? 滑块视图容器.其中只可放置swiper-item组件,否则会导致未定义的行为. 2.swiper和swiper-itme怎么使用? 接下来我尝试教大家怎么使用swipe ...
最新文章
- 华山论剑之浅谈iOS的生产线 工厂模式
- 使用R语言进行中文分词
- GNN笔记:图信号处理(Graph Signal Processing)
- youcans 的 OpenCV 学习课—8.频率域图像滤波(上)
- 安卓入门程序《发短信》
- java程序给输出汉字_java面试题目编写一个java程序,实现拼音转成对应汉字功能。...
- Pokémon Go呼应设计:让全世界玩家疯狂沉迷
- 优先队列/oriority queue 之最大优先队列的实现
- 添加manifest解决IDirect3DDevice9::GetFrontBufferData抓屏返回失败
- I219网卡rom数据坏了以后,恢复网卡rom数据
- php excel 下拉菜单,Yii2+phpexcel导出二级联动菜单
- 软件工程专业英语翻译【考研复试】
- pc自建服务器传输3ds,新3DS自带的PC管理MicroSD 最强无线传输软件
- 【原创开源应用第2期】基于RL-USB和RL-FlashFS的完整NAND解决方案,稳定好用,可放心用于产品批量
- win10的安装与优化
- 浅谈SRAM与DRAM的异同
- Harmonious Graph(并查集)
- 一口气入门计算机网络基础(CCNA)
- 鱼和熊掌兼得——解密阿里云PCDN如何实现高质量低价格
- Diskman 重建分区表 (小莫)
热门文章
- UC浏览器首页滑动动画实现
- QEMU 网络配置一把梭
- 国产麒麟系统PXE安装-传统bios(legacy)引导
- ctfshow crypto funnyrsa3 RSA之dp泄露
- 计算机老师三年发展规划,信息技术专业教师个人发展三年规划汇总(全).doc
- [读书笔记]《程序员代码面试指南》
- 中国叶酒市场趋势报告、技术动态创新及市场预测
- python派森编程软件_派森Python官方下载_派森Python最新版_派森Python官方版-华军软件园...
- canvas--putImageData--(灰色滤镜、黑白滤镜、反色滤镜、模糊滤镜、马赛克滤镜)
- FUHLEN/富勒 U79/U79G节能系列/U系列无线2.4G接收器-淘宝网