如何使用swiper.js制作图片联动效果，实现点击小图显示大图呢？首先在一个页面中使用两个Swiper组件，并使它们同时进行滚动播放幻灯片的效果。 其中一个显示小图一个显示大图，并且图片个数一定要一致。
Swiper是一个流行的开源的移动端触摸滑动插件，用于创建滑动、轮播等交互效果。它支持多种滑动模式和自定义配置，非常适合用于创建幻灯片展示。
实现步骤
为了实现同时呈现两个Swiper幻灯片，可以按照以下步骤进行操作：
引入Swiper库：在HTML文件中引入Swiper的CSS和JS文件，可以从官方网站（https://swiperjs.com/）下载最新版本。
创建HTML结构：在页面中创建两个容器，分别用于放置两个Swiper组件的幻灯片内容。
初始化Swiper组件：使用JavaScript代码初始化两个Swiper组件，并设置它们的配置参数。可以设置滑动方向、滑动速度、自动播放等参数。
绑定鼠标移到小图时显示大图事件： 通过mySwiper.slideTo(index, speed, runCallbacks)，控制Swiper切换到指定slide。
在上述示例中，我们创建了两个Swiper组件，分别使用img-big 和 img-small作为它们的容器。通过设置mySwiper.slideTo(index, speed, runCallbacks)，当点击其中一个img-small Swiper组件时，根据index顺序在img-big Swiper组件显示对应的大图图片。
这样，就实现了点击小图呈现大图的效果。
关键代码与说明
<script>
$(function () {
//上面大图轮播
var swiper1 = new Swiper('.img-big', {
loop: false,
effect: "fade",
})
//下面小图轮播
var swipers = new Swiper('.img-small', {
loop: false,
prevButton: '.img-small .swiper-button-prev',
nextButton: '.img-small .swiper-button-next',
slidesPerView: "auto",
})
//鼠标移到小图时显示大图
$(".img-small .item").mouseover(function () {
//获得焦点
$(this).addClass("active").siblings().removeClass("active");
//获取小图图片索引
var index = $(this).index();
//mySwiper.slideTo(index, speed, runCallbacks)，控制Swiper切换到指定slide。
//大图跳到相对索引 控制Swiper切换到指定slide。切换速度600(单位ms)
//runCallbacks设置为false时不会触发transition回调函数
swiper1.slideTo(index, 600, true);
})
})
</script>
