Question

vue使用swiper的thumbs组件如何显示对应id的图片

写了个点击图片列表跳转详情页查看大图与缩略图，大图可左右滑动查看图片，下方缩略图跟着显示的功能，详情页用swiper的thumbs组件写的，该怎么点击列表页的图片在详情页显示的是点击查看的那张图；





Answer 1

首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

<div class="swiper-container">
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<!-- 如果需要滚动条 -->
</div>
导航等组件可以放在container之外
思路很简单：在swiper组件内部添加两个image组件，绑定点击事件，动态改变swiper中的current值。

Answer 2

老哥，你解决了这个问题么，我也遇到这个问题卡了好久，怎么外面点击图片，里面大图显示对应图片。