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

首先加载插件，需要用到的文件有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值。

这个注意看swiper的文档就可以了,可以使用jquery动态添加元素，然后调用swiper的update()方法即可。下面是一个小例子，记得把swiper和jquery引入进来。

Swiper常用于移动端网站的内容触摸滑动。

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

以uni-app为例，其中的具体情况如下：

1、直接打开主界面，找到manifest.json并点击跳转。

2、下一步，需要按照图示选择swiper组件。

3、这个时候，如果没问题就根据实际情况设置自动播放参数。

4、等完成上述 *** 作以后，继续在那里确定添加轮播图的相关方法。

5、这样一来会发现对应的运行结果，即可达到目的了。

---