前言

如今，轮播图已经是每一个网站都会配备，其有着高效展现效率，本文将会介绍 Swiper 这个插件，讲解初始化步骤以及常见的参数。

一、swiper

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。通过它可以快速地制作轮播图、h5等许多功能展现。

二、初始化

1.使用swiper文件或者cdn加载

使用 swiperJS 需要同时引入 swiper.css 和 swiper.js 两个文件。本文主要是通过cdn加载的方式，并且考虑到浏览器的兼容性，使用v4.5.1。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>SwiperJS</title><!-- 引入相关的 css 文件 --><link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/css/swiper.css" rel="stylesheet" /></head><body>...</body><!-- 引入相关的 js 文件 --><script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/js/swiper.js"></script>
</html>

2.页面结构

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之外 -->

JS初始化

var mySwiper = new Swiper('.swiper-container', {direction: 'vertical', // 垂直切换选项loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},
});

Dome案例

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>SwiperJS</title><link href="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/css/swiper.css" rel="stylesheet" /><style>body,div {margin: 0;padding: 0;}div.swiper-container {width: 100vw;height: 100vh;}div.swiper-slide {width: 100%;height: 100%;color: #ffffff;}div.swiper-slide:nth-child(1) {background-color: #16a085;}div.swiper-slide:nth-child(2) {background-color: #2980b9;}div.swiper-slide:nth-child(3) {background-color: #f1c40f;}</style></head><body><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></body><script src="https://cdn.bootcdn.net/ajax/libs/Swiper/4.5.1/js/swiper.js"></script><script>var mySwiper = new Swiper('.swiper-container', {direction: 'horizontal', // 垂直切换选项loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},});</script>
</html>

Demo效果图

三、个性化

除了Dome案例中的默认样式之外，Swiper 还提供了许多的内置参数，可供我们自由调整。

1. direction：滑动方向

参数

horizontal ：（默认）水平方向
vertical：垂直方向

2. speed：滑动时间

参数

number ：（默认：300），单位：ms

3. autoHeight：高度自适应

设置为true时，wrapper 和 container 会随着当前 slide 的高度而发生变化。

参数

boolean：（默认：false）

4. autoPlay：自动滑动

参数

boolean：（默认：false）

总结

以上便是对 SwiperJS 的介绍，需要了解更多可以阅读官方文档，相信里面会有你想要的。

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我，
官方文档： Swper

关于 SwiperJS 的初次使用相关推荐

celery的初次使用
celery的初次使用基本步骤: 选择并且安装一个消息中间件(Broker) 安装 Celery 并且创建第一个任务运行职程(Worker)以及调用任务跟踪任务的情况以及返回值应用创建第一个 ...
阿里云服务器ECS Ubuntu16.04 初次使用配置教程(图形界面安装)
阿里云服务器ECS Ubuntu16.04 初次使用配置教程(图形界面安装) 2019-01-23 22:55:50 laugh12321 阅读数 851更多分类专栏: ECS Ubuntu 版权声 ...
人脸识别算法初次了解
人脸识别算法初次了解这是转载别人的帖子,认为好,大家一块学习http://www.cnblogs.com/guoyiqi/archive/2011/07/28/2129300.html 前言在写此 ...
Cash Shuffle初次测试成功，BCH隐私研究逐步推进
早在去年12月,一项名为 Cash Shuffle的比特币现金项目就被提了出来,该项目旨在通过混淆交易信息来保证BCH交易隐私.该项目在当时引起了社区的热议,因为隐私属性一直是加密货币最重要的属性之一 ...
MySQL的安装和初次使用
MySQL的安装和初次使用 1.去数据库的官网http://www.mysql.com下载MySQL: 2.找到如下图所示: 下好后按照next/execut安装即可,会有设置密码页: 安装好以后可能 ...
初次安装Magento商城后台报错的解决方案
今天初次安装Magento, 开始装的是英文版,后来又找到中文版安装后在后台都有同一个错误,就是登陆后台,随便点击一个链接,都有报错 There has been an error processi ...
Struts2笔记——初次框架配置
1.Struts2简介 Struts 2是Struts的下一代产品,是在 struts 1和WebWork的技术基础上进行了合并的全新的Struts 2框架.其全新的Struts 2的体系结构与S ...
git 上传代码到指定仓库_初次使用git上传代码到github远程仓库
一.新建代码库注册好github登录后,首先先在网页上新建代码库. 点击右上角"+"→New repository 进入如下页面:按照要求填写完成后,点击按钮创建代码库创建成功. ...
论初次修改 Android framework 代码
点击打开链接论初次修改 Android framework 代码背景公司产品需求,需要修改系统 framework 层的部分界面显示,包括声音调节.亮度调节.长按电源关机等. 准备我并不是白手 ...
用初次训练的SVM+HOG分类器在负样本原图上检测HardExample
难例(或叫做难样本,Hard Example,Hard Negative,Hard Instance)是指利用第一次训练的分类器在负样本原图(肯定没有人体)上进行行人检测时所有检测到的矩形框,这些矩形 ...

关于 SwiperJS 的初次使用

文章目录

前言