Swiper滑块交互需求求助：悬停前后按钮显示对应预览图片

嘿，我刚好做过类似的Swiper交互效果，给你整理了一套完整的实现方案，应该能解决你的问题！

• 主滑块的next/prev按钮悬停时，显示对应方向的图片预览
• 预览区域自带的prev按钮悬停时，切换预览图到上一张，移出后自动切回原本的预览图

HTML结构 #

先补全你的HTML结构，包含主滑块、预览容器以及对应的控制按钮：

<div class="slider-container">
  <!-- 主滑块 -->
  <div class="main-slider swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background: #ff6347;">Slide 1</div>
      <div class="swiper-slide" style="background: #4682b4;">Slide 2</div>
      <div class="swiper-slide" style="background: #32cd32;">Slide 3</div>
      <div class="swiper-slide" style="background: #ffd700;">Slide 4</div>
    </div>
    <!-- 主滑块控制按钮 -->
    <div class="swiper-button-prev main-prev"></div>
    <div class="swiper-button-next main-next"></div>
  </div>

  <!-- 预览区域 -->
  <div class="preview-slider-container">
    <div class="preview-slider swiper-container">
      <div class="swiper-wrapper"></div>
    </div>
    <!-- 预览区域控制按钮 -->
    <div class="swiper-button-prev preview-prev"></div>
  </div>
</div>

CSS样式 #

处理预览区域的隐藏/显示、布局以及按钮样式：

.slider-container {
  position: relative;
  width: 800px;
  margin: 50px auto;
}

.main-slider {
  width: 100%;
  height: 400px;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

/* 预览区域默认隐藏 */
.preview-slider-container {
  position: absolute;
  bottom: -120px;
  right: 0;
  width: 200px;
  height: 100px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.preview-slider-container.active {
  opacity: 1;
  visibility: visible;
}

.preview-slider {
  width: 100%;
  height: 100%;
}

/* 调整按钮位置 */
.main-prev, .main-next {
  z-index: 10;
}

.preview-prev {
  left: -30px;
  transform: translateY(-50%);
}

JavaScript逻辑 #

结合Swiper API和鼠标事件实现交互：

// 初始化主滑块
const mainSwiper = new Swiper('.main-slider', {
  navigation: {
    nextEl: '.main-next',
    prevEl: '.main-prev',
  },
  loop: true, // 开启循环，避免边界无法预览的问题
});

// 初始化预览滑块
const previewSwiper = new Swiper('.preview-slider', {
  loop: true,
  allowTouchMove: false, // 禁用触摸滑动，只通过按钮控制
});

// 复制主滑块的slide到预览滑块，保证内容一致
const mainSlides = document.querySelectorAll('.main-slider .swiper-slide');
mainSlides.forEach(slide => {
  const previewSlide = slide.cloneNode(true);
  previewSlide.style.height = '100%';
  document.querySelector('.preview-slider .swiper-wrapper').appendChild(previewSlide);
});

const previewContainer = document.querySelector('.preview-slider-container');
const mainPrevBtn = document.querySelector('.main-prev');
const mainNextBtn = document.querySelector('.main-next');
const previewPrevBtn = document.querySelector('.preview-prev');

// 主next按钮悬停逻辑
mainNextBtn.addEventListener('mouseenter', () => {
  previewContainer.classList.add('active');
  // 切换到主滑块的下一张预览
  previewSwiper.slideTo(mainSwiper.activeIndex + 1);
});

mainNextBtn.addEventListener('mouseleave', () => {
  previewContainer.classList.remove('active');
});

// 主prev按钮悬停逻辑
mainPrevBtn.addEventListener('mouseenter', () => {
  previewContainer.classList.add('active');
  // 切换到主滑块的上一张预览
  previewSwiper.slideTo(mainSwiper.activeIndex - 1);
});

mainPrevBtn.addEventListener('mouseleave', () => {
  previewContainer.classList.remove('active');
});

// 预览区域prev按钮悬停逻辑
let originalPreviewIndex = null;
previewPrevBtn.addEventListener('mouseenter', () => {
  originalPreviewIndex = previewSwiper.activeIndex;
  previewSwiper.slidePrev();
});

previewPrevBtn.addEventListener('mouseleave', () => {
  if (originalPreviewIndex !== null) {
    previewSwiper.slideTo(originalPreviewIndex);
  }
});

• 开启Swiper的loop模式：解决滑块在首尾位置时无法预览前后图片的问题
• 预览滑块禁用触摸滑动：防止用户误操作打乱预览交互逻辑
• 鼠标事件监听：通过mouseenter/mouseleave控制预览区域的显示隐藏，以及预览图的切换
• 复制主滑块slide：保证预览图和主滑块内容完全同步

这样就能完美实现你想要的交互效果啦！

内容的提问来源于stack exchange，提问作者Hur Hussain