Swiper缩略图thumbs使用方法

1.链接缩略图和轮播图

官方给的实例方法可能很多人没有看懂，其中#thumbs 是给缩略图添加，在缩略图最外层的div上添加id='thumbs'；#gallery是给轮播图添加的，在轮播图最外层div上添加id='gallery'。

spaceBetween：表示每张图片之间的间隔。

slidesPerView：表示一个容器里放几张图片

thumbs:{

        swiper: 链接的缩略图对象名称
}

 2.给缩略图添加一些样式

    .swiper-container-thumbs img{ //缩略图下的图片
        width: 192.5px;
        height: 100px;
        opacity: 0.5;
    }

    .swiper-container-thumbs .swiper-slide-thumb-active img{ //缩略图下的图片
        opacity: 1;
    }

现将缩略图下的图片格式调整好，然后将所有的图片透明度调整成0.5，然后在写一个，需要在图片之前加入.swiper-slide-thumb-active就可以添加上官方一样的样式。