swiper的简单使用方法
在网站建设中，经常不可缺少的就是轮播切换等特效。实现轮播切换特效的jq插件也不少，比如superslide，比如swiper。
那么这篇就主要简单讲下swiper是怎么使用的。
其实官方的介绍已经说的很清楚了，在这里重新重复下。
引用jq和swiper的js已经不需多说，swiper.min.css的样式文件也需要一起引用。
然后就是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>
保证html的结构是按照如上编写，最后加入一小段js就可以看到效果了。
<script>
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',
},
})
</script>
简单说下一点点小结，样式表是必须引导，但是里面的样式并不是不可以修改，还是需要按照自己开发的实际需求可以调整样式。
html的结构并不是一定要写div，也可以用ul的结构，但是样式名称必须是如上方结构加上，
也就是swiper-container包含swiper-wrapper包含swiper-slide。
在实际应用中，我们可以能已经写好了自己的轮播图html结构
大致如下
<div banner>
<ul>
<li></li>
<li></li>
</ul>
</div>
那么我们只需要把swiper固定好的样式名称补充进去即可
<div swiper-container banner>
<ul swiper-wrapper>
<li swiper-slide></li>
<li swiper-slide></li>
</ul>
</div>
js方面
<script>
var mySwiper = new Swiper ('.banner', {
loop: true, // 循环模式选项
})
</script>
就可以完成轮播的效果了
那么其他的效果，官网的网站上面已经有很多了，在实际应用中多去官方网站上面看下源码，相信你会很快熟练应用到自己的项目中去。
相关资料：
https://www.swiper.com.cn/
