运用CRM完成Swiper轮播

在此之前，我有记录过如何用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，在面对其他我们不熟悉的库的使用时，我们也能丝毫不虚。