您的位置：首页 > Web前端 > CSS

Swiper学习之一---入门：swiper相关文件、swiper代码结构和样式、初始化Swiper

2017-12-13 21:51 656 查看
呼呼，连着更新了好长时间的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的初始样式

c602
这个部分可要可不要，但是如果你想严谨一点的话，可以给最外层的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博文的。

一起开开心心轻轻松松的学习，加油！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航