最近，某**网站的一些模块设计者设计得很巧妙，在传统的轮播切换效果之上，添加了页码效果和进度条效果。如下所示：
从图中可以看到，图片左右旋转，两侧都有提示区域。下面是一个进度条，下面是页码。单独实现这三种效果并不难，但是将这三种效果整合成一个轮播效果就需要花费很大的功夫了。
恰巧网上开源插件中swiper有上诉效果，所以我选择使用swiper插件来开发这个效果。
Swiper常用于触摸和滑动移动网站的内容。它是一个纯粹用JavaScript创建的滑动**插件。在人脸、平板等移动端也有不错的效果。在PC上也有很好的效果。
以下是实现此效果的一些代码截图：
html结构：
CSS代码：
Js代码：
效果如下：
因为有页码效果，这里不能设置循环，所以初始状态左侧没有提示内容。同时进度条中有一个提示模块，如下：
这里我选择在原来的结构上添加一个div来达到这个效果。具体代码如下：
虽然是按照设计稿上的尺寸写的，但实际效果是
宽度已缩放。经过排查，发现是控制进度条进度的插件的代码影响了这个。这被认为是一个错误。我尝试使用转换来纠正它。虽然初始状态是一致的，但是随着滚动的继续，我发现宽度还是会发生变化。而且用在这里！重要的是修复宽度无效。目前就这样，稍后我会想办法改进这个bug。
