近期手上一个手机站的部分模块企图师企图的很有灵性，在传统轮播切换成果下面还加上了页码成果和进度条成果。以下图：
由图能够看到下面是图片摆布轮播，并且双方都留有提示地区。下面是一条进度条，再下面是页码。这三个成果单个完成都不难，然则要将这三个成果整合到一个轮播成果表面，就需要费一番工夫了。
刚巧在网上开源插件中swiper中上诉成果都有，这里也就选择应用swiper插件来举行这个成果的开发了。
Swiper经常应用于挪动端网站的内容触摸滑动，是纯javascript打造的滑动殊效插件，面相手机、平板电脑等挪动终端，在PC上也有较好的成果。
下面是完成该成果的部分代码截图：
Html布局：
Css代码：
Js代码：
完成成果以下：
因为有页码成果，以是这里就不克不及设置循环，以是初始状态下左侧是没有提示内容的。同时，在进度条中有一个提示模块，以下：
这里我是选择在原有布局中加上一个div来完成该成果的，
品牌SEO优化公司，详细代码以下：
虽然是按照企图稿上的尺寸来写的，然则理论出来的成果却是
宽度被缩放了，经由排查创造是插件把持进度条进度的代码影响到这里了，这算是一个bug吧，测验测验用transform来改正，虽然初始状态不合了，然则跟着滚动，创造宽度照旧会变化，并且这里用！Important来坚固宽度是有效的。今朝就如许了，后面再设法子改良这个bug吧。