在此之前，我有记录过如何用jQuery完成轮播，详见博客文章，其过程十分鬼畜，要考虑很多问题。
虽然实现的过程中学习到了很多东西，但是工作之后一个轮播也要自己手把手撸的话可没有那么多时间。
现在的库那么多，为什么不直接用现成的库来实现呢？
今天就记录一下用swiper来实现轮播：Swiper官网
在使用一个不熟悉的库的时候，方老师教的CRM大法就派上了大用场了。
什么是CRM
Copy(C)-Run(R)-Motify(M)，其实就是完整地依照官方文档提供的教程操作，先把他的主要功能运行起来，再根据项目的需求，查询API，慢慢地进行修改、完善，直至完成。
好啦，开始吧。
Copy
完全照着官方demo的教程，添加项目依赖和代码结构。
引入依赖
<!-- 引入CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css">
<!-- 引入JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script>
注意:
1.替换版本号：
2.如何确定项目中已正确引入JS文件：我们可以看到官网demo中，完成轮播需要创建一个Swiper实例对象，我们只要在控制台中log一下目前window中有没有这个属性即可：
添加HTML
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
添加CSS
.swiper-container {
600px;
height: 300px;
}
添加js
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
Run
接着让我们来运行一下吧！
可以看到，虽然这个轮播差强人意，样式不美观，轮播框大小和轮播方向也不是我们想要，但是他已经运行起来了！他已经具有一个轮播该有的功能，我们需要做的只是把他修改到符合我们的需求而已！
Motify
根据我们的需求大刀阔斧地改进吧~
修改轮播框大小：
.swiper-container {
800px;
height: 600px;
}
修改轮播方向：
可以看到JS创建的Swiper实例中，有一个direction: 'vertical'属性，他说明了目前轮播的方向是垂直的，我们把他删了试试。
删除scrollbar：
这个scrollbar看起来不是很美观，我们把他也删了：
为了更好地观察，我把背景调成了#999
滚动条没有了滚动特效，但是滚动条还在。
是我们的HTML结构没有删除干净：
<!-- 把这里删了就好 -->
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
修改前进后退按钮：
因为.swiper-container使用了overflow:hidden，所以如果我们要把这两个按钮放在轮播框外面，就要把他从HTML结构中移出来：
<div id="mySlides">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
修改按钮的CSS：
.swiper-button-prev,
.swiper-button-next {
background-color: #fff;
border-radius: 50%;
66px;
height: 66px;
left: auto;
right: 100%;
top:54%;
}
.swiper-button-next {
left: 100%;
right: auto;
}
一个炫(?)酷(?)的轮播就完成了~
当然也可以换上自己的图片：
<div id="mySlides">
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<img src="./img/works/canvas.jpg" class="swiper-slide">
<img src="./img/works/keyboard.png" class="swiper-slide">
<img src="./img/works/slides.png" class="swiper-slide">
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
最终代码详见JSbin
不仅代码比我们之前的轮播简介，还有各种设置已经被封装好了给我们使用，可谓省心省力。
总结
其实这个轮播不是最重要的，重要的是在使用这个swiper库的过程中，所学到的CRM方法，先把东西copy过来，运行成功，再慢慢修改，碰到问题多google、StackOverflow，在面对其他我们不熟悉的库的使用时，我们也能丝毫不虚。