呼呼,连着更新了好长时间的jQuery的博客了,呃呃~打个广告的,有需要的小伙伴可以点击这个链接jQuery专栏去看一下,不需要的可以自动忽略的哦,哈哈。
然后就是从今天开始我们一起来看看Swiper的使用,本人可是认认真真的学习过后才来更的博文哦,但是不排除会有问题,萍子会尽力的,大家一起学习吧,加油!
本文主要参考swiper文档,然后会掺着自己的理解,希望可以帮助小伙们更好的理解哦。
一、学习Swiper需要的相关文件
下载地址:Swiper文件下载
这个网站上会提供所有Swiper所用到的文件,包括js和jq版本的。
我用插件一般习惯用原生,所以我这里就以原生为例哦。
初步需要下载的文件:
swiper-3.4.2.min.js
swiper-3.4.2.min.css
刚刚开始接触Swiper的时候,引入这两个文件就足够了。
然后在html文档的对应的位置,引入就可以了。
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="swiper-3.4.2.min.css">
</head>
<body>
...
<script src="swiper-3.4.2.min.js"></script>
</body>
</html>
二、Swiper的代码结构
我们都知道Swiper是帮助我们方便完成轮播图的,所以也应该知道写轮播图需要一定的代码结构来构造它,大致需要三层来完成对轮播图的嵌套和包裹。在Swiper里也不例外,同样的,需要三层代码的包裹结构。如下:
<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之外
如上图所示,对于swiper的结构,包裹了三层,这一点如果记不住,可以自己想象一下:轮播图之所以可以能动起来,是因为它们是独立的个体(最里层),排成一排很长的图片(中间层),在一个容器里移动显示对应的位置的(最外层)。哈哈,反正我就是这么理解的,但是实在记不住临用了查文档也是可以的。
然后就是大家肯定也注意到了,除了轮播图主体本身,还会有其他常用的三个部分,其实很简单,知道轮播图的,都知道轮播图下方会有小点点的对不对,那个东西就是分页器,有的鼠标移入就可以切换图片,有的点击可以切换图片;导航按钮就更简单了,通俗的说就是图片左右两边的那个上一张和下一张;至于滚动条,是一个类似于进度条的东西,图片切换到哪张,这个滚动条就对应的滚动到哪里。
三、swiper的初始样式
这个部分可要可不要,但是如果你想严谨一点的话,可以给最外层的div设置一个宽高。
.swiper-container {
width: 600px;
height: 300px;
}
四、初始化swiper的js代码
我们都知道script标签的位置一般可以放置在body标签内和body标签外,这里需要注意的是,如果写在body标签内的话,需要在页面加载完成后再初始化。
<script type="text/javascript">
window.onload = function() {
...
}
</script>
但是如果写在body标签的外面就不用了:
<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>
我先来解释一下上面代码中的属性的意思:
首先执行swiper,是需要new一个swiper对象的,其第一个参数是swiper最外层的类名,意为swiper是加给这个元素的。
其次,direction,顾名思义,就是轮播图轮播的方向的意思。Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。类型:string;默认:horizontal 水平。
再次,loop,设置为true 则开启loop模式。loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。
关于这个其实不难理解,我们自己徒手写过轮播图的小伙伴应该知道,当所有图片轮完一遍时候,是需要造成一个假象的,需要在最后一张图片的后面添加上首张图片,已更好的达到在最后一张点击下一张的时候显示第一张的效果,嘻嘻~
最后是,下面的分页器、前进后退按钮和滚动条,这个我们不用过多的纠结,swiper已经帮我们写好了它们的方法,根据我们的需要,如果要用的话,我们直接写上就可以了。
好了,以上就是Swiper的使用基础,下面给大家看一下,这个的最初的效果,嘻嘻,萍子加了几张图片,看起来还是很好看的,来一起看看吧~
对了,突然想起来要补充的一点,我们的Swiper在引用完swiper文档以后,就已经是左右居中的状态了哦。
鉴于CSDN的图片大小只能在2M以内,所以点的很快,大家大致看一下,后面我还有专门的博文再进行说明。
好了,Swiper入门萍子就先说这么多,想要学习更多的小伙伴们,可以关注萍子,后续会持续更关于swiper博文的。
一起开开心心轻轻松松的学习,加油!