swiper缩略图hover切换
时间: 2025-04-30 16:59:48 浏览: 29
### 实现 Swiper 缩略图 Hover 悬停切换效果
为了实现 Swiper 的缩略图在鼠标悬停时进行切换的效果,可以利用 `controller` 和事件监听功能来完成。具体来说,在初始化两个 Swiper 实例之间创建关联关系,并通过 JavaScript 添加鼠标移入事件处理程序。
#### 初始化主轮播与副轮播(缩略图)
```javascript
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4, // 设置每页显示的缩略图数量
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
thumbs: { swiper: galleryThumbs } // 关联到上面定义好的缩略图实例
});
```
这段代码设置了两个不同容器内的 Swiper 组件之间的互动逻辑[^1]。
#### 增加鼠标悬停交互行为
为了让缩略图响应鼠标的悬浮动作并自动切换对应的主图,可以在页面加载完成后附加如下脚本:
```javascript
document.querySelectorAll('.gallery-thumbs .swiper-slide').forEach(function (element) {
element.addEventListener('mouseenter', function () {
var index = Array.from(this.parentNode.children).indexOf(this);
galleryTop.slideTo(index); // 调用 slideTo 方法跳转至对应索引位置的大图
});
});
```
此部分实现了当用户的光标进入某个特定的小图区域时触发大图同步变化的功能[^2]。
上述配置能够满足需求中的描述——即“Swiper 插件设置鼠标经过缩略图标切换图片”的要求。值得注意的是,这里假设 HTML 结构已经按照官方文档说明进行了适当调整,确保类名为 `.gallery-top` 及`.gallery-thumbs` 的元素存在并且结构正确。
阅读全文
相关推荐


















