如果想实现页面中图片的一个灯箱展示，分组展示，并且支持图片缩放，利用swiper的特性，我们应该怎么处理呢？最下面有一个小坑，好在最后解决了，积累了经验。

1.首先，我遇到可以一个场景，当后台无法返回一组前台想要的数据时，用JS，把页面DOM处理成自己想要的数据：

    var obj = $(".demo")
    if (obj) {
        var data = [];
        obj.each(function(i,v){
            var id = $(v).attr('id');
            var arr = [];
            arr['id'] = id
            var imgs = $(v).find('.demo-img');
            if (imgs) {
                var arr1 = [];
                imgs.each(function(i1,imgObj){
                    var img =  $(imgObj).attr('src');
                    if (img) {
                        arr1[i1] = img
                    }
                    arr['imgs'] = arr1
                })
            }
            if (arr) {
                data[i] = arr;
            }
        })

        console.log(data)   //result
    }

2.利用ID查找，当前点击属于哪一组数据

 var imgarrid = $(this).parents('.bestPre').attr('id')；
 thisImgSrc = $(this).attr('src');
 var obj = data.find(function(item) {
       return item.id === imgarrid
  })
console.log(obj); //获取到了当前点击的那组图片数据

3.利用swiper的appendSlide()方法，动态添加slide，slide中是我们的图片数据的循环，此时我们生成了这组图片数据的swiper了

 obj.imgs.forEach((e,index) => {
    if(e == thisImgSrc){
        imgIndex = index; 
     }
     lightSwiper.appendSlide('<div class="swiper-slide"><div class="swiper-zoom-container"><img src="'+ e +'"></div></div>');
});

4.swiper的一个特点，是每次更改slide之后，都需要销毁和更新swiper，来初始化新的内容。我用的最新版swiper，所以使用了update()方法来进行更新。

lightSwiper.update()

5.接下来就是让生成的这组轮播数据，那怎么自动定位到我们点击的那个图片slide上，用到了我们上面获取到的index，结合slideTo()方法。

lightSwiper.slideTo(imgIndex, 0, false);

6.怎么实现图片缩放呢，swiper中为我们准备了swiper-zoom-container，加上这个类就可以随意缩放图片啦。但是这里有一个坑。

------当你反复缩放图片的时候，图片会忽然卡住，不再缩放了。。。为什么呢？一开始我也是蒙的，各种求助，各种排查，在我要放弃的时候，我打印了一下zoomchange里面的scale，

------一定是因为我的人品爆发了，我发现swiper的方法图片的时候，改变的是图片的scale值，然后我们每次缩放，关闭启动swiper，这个值一直再累加，我内心的声音告诉我，就是它的锅。

所以，在使用swiper的时候，一定要记得销毁和更新的事情。

lightSwiper.zoom.out();  
lightSwiper.removeAllSlides();