一、什么是 swiper ?swiper 是一个纯 javascript 打造的滑动特效插件,面向手机、平板电脑等chinamobile终端.它能够完成触屏焦点图、触屏 tab 转换、触屏多图转换等常用效果.swiper 开源、不收费、稳定、使用简单、功能较强,是网站开发中的不2选择.swiper 运用普遍,使用频率仅次于 jquery,轮播图类排名第一,是网页制作师必备技能.众多耳熟能详的品牌在使用,如：北京东奥官网,华为,格力,顺丰,大疆,网易等等.

　　简单了解完 swiper 较强之处了,今天大家主要的内容是讲讲如何使用 swiper 完成射阳小程序制作开发中常见的缩略图焦点图双向控制.

　　2、引进 swiper 插件首先,大家要在网站中引进 swiper 插件,这边推荐使用 swiper5 或者 swiper7 的版本,主要资源可以在官网下载,这里以 swiper5 为例.分别引进 css 文件和 javascript 文件如下：

　　

　　

　　

　　

　　1、创建 html 结构

　　

　　

　　slider1

 

　　slider2

 

　　slider3

 

　　slider4

 

　　slider5

 

　　

 

　　

　　

 

　　

 

　　

 

　　

　　

　　

　　slider1

 

　　slider2

 

　　slider3

 

　　slider4

 

　　slider5

 

　　

 

　　

 

　　4、在 css 中设定焦点图和缩略图的样式：/* ==================== 焦点图和缩略图公用样式 start ==================== */

　　.galleryswiper.swiper-slide,

　　.thumbsswiper.swiper-slide{

　　background-color: #4390ee;

　　font-size: 20px;

　　text-align: center;

　　color: #fff;

　　font-weight:200;

　　}

　　.galleryswiper.swiper-slide:nth-child(2n),

　　.thumbsswiper.swiper-slide:nth-child(2n) {

　　background-color: #ca4040;

　　}

　　.galleryswiper.swiper-slide:nth-child(3n),

　　.thumbsswiper.swiper-slide:nth-child(3n) {

　　background-color: #ff8604;

　　}

　　.galleryswiper.swiper-slide:nth-child(4n),

　　.thumbsswiper.swiper-slide:nth-child(4n) {

　　background-color: #4390ee;

　　}

　　.galleryswiper.swiper-slide:nth-child(5n),

　　.thumbsswiper.swiper-slide:nth-child(5n) {

　　background-color: #22ab39;

　　}

　　/* ==================== 焦点图和缩略图公用样式 end ==================== */

　　/* ==================== 焦点图样式 start ==================== */

　　.galleryswiper{

　　margin-bottom: 15px;

　　}

　　.galleryswiper.swiper-slide{

　　height: 200px;

　　line-height: 200px;

　　}

　　.galleryswiper.swiper-button-prev:after,

　　.galleryswiper.swiper-button-next:after{

　　color: #fff;

　　font-size: 20px;

　　}

　　/* ==================== 焦点图样式 end ==================== */

　　/* ==================== 缩略图样式 start ==================== */

　　.thumbsswiper.swiper-slide{

　　height: 100px;

　　line-height: 100px;

　　cursor: pointer;

　　}

　　/* ==================== 缩略图样式 end ==================== */

　　5、在 javascript 中初始化 swiperletgalleryswiper=newswiper("#galleryswiper", {

　　speed: 800, // 转换快速

　　allowtouchmove: false, // 设定焦点图是否允许触摸滑动转换

　　spacebetween: 40, // 在slide之间设定距离(单位px)

　　navigation: {

　　nextel: "#galleryswiper .swiper-button-next",

　　prevel: "#galleryswiper .swiper-button-prev"

　　},

　　thumbs: {

　　swiper: {

　　el: "#thumbsswiper",

　　spacebetween: 15,

　　slidesperview: 4, // 设定slider容器能够同时显示的slides数量

　　observer: true,

　　observeparents: true,

　　watchslidesprogress: true,

　　watchslidesvisibility: true

　　},

　　autoscrolloffset: 1// 设定全全自动滚动的边缘slide个数

　　}

　　});

　　?

　　6、最终效果如下：

　　7、射阳小程序制作核心代码：实际上大家使用 swiper 完成焦点图,缩略图双向转换很简单,主要是运用了 swiper api 中的thumbs组件,它专门用于制作带缩略图的swiper,比使用controller组件更为简便,且在loop状态下更友好.

　　值得一提的是,autoscrolloffset属性,这个参数不是完成焦点图缩略图功能的必要属性. 它可以设定全全自动滚动的边缘slide个数.

　　当缩略图的slide个数超过最大显示的数量时,缩略图会全全自动滚动来对应主图的slide.默认缩略图与主图同步显示,有时你想缩略图要比主swiper提前一些显示,这时可以设定这个参数.

　　比如缩略图显示4个slide,当主图滑动至第5张时,缩略图才会滚动,设定此参数为1后,主图滑动至第4张时缩略图就提前滚动了.

　　射阳小程序制作主要效果可以在编辑器上自行测试下,按主要需求使用呢.