SwiperJS单张幻灯片左右半区点击切换上下幻灯片功能咨询

Swiper目前没有直接实现该需求的内置配置项，你提到的slideToClickedSlide确实仅适用于同时显示多张幻灯片的场景，因此需要通过自定义事件处理来实现点击幻灯片左右半区切换上下页的功能。

实现步骤及代码示例 #

• 监听Swiper容器的点击（或触摸）事件
• 计算点击位置相对于当前幻灯片的横向占比
• 根据区域判断调用Swiper的slidePrev()或slideNext()方法切换幻灯片

// 初始化Swiper实例
const swiper = new Swiper('.swiper', {
  slidesPerView: 1, // 单张显示的基础配置
  // 其他你需要的配置项
});

// 获取Swiper容器元素
const swiperContainer = document.querySelector('.swiper');

// 添加点击事件监听
swiperContainer.addEventListener('click', function(e) {
  const activeSlide = swiper.slides[swiper.activeIndex];
  const slideWidth = activeSlide.offsetWidth;
  // 计算点击位置相对于容器左侧的横坐标
  const clickPositionX = e.clientX - this.getBoundingClientRect().left;

  // 判断点击区域并执行切换
  if (clickPositionX < slideWidth / 2) {
    swiper.slidePrev(); // 左半区：切换上一张
  } else {
    swiper.slideNext(); // 右半区：切换下一张
  }
});

移动端适配说明 #

如果需要支持移动端触摸操作，可以将click事件替换为touchend事件，通过e.changedTouches[0].clientX获取触摸结束时的横坐标，逻辑和点击事件一致：

swiperContainer.addEventListener('touchend', function(e) {
  const activeSlide = swiper.slides[swiper.activeIndex];
  const slideWidth = activeSlide.offsetWidth;
  const touchX = e.changedTouches[0].clientX - this.getBoundingClientRect().left;

  if (touchX < slideWidth / 2) {
    swiper.slidePrev();
  } else {
    swiper.slideNext();
  }
});

注意：如果存在幻灯片动态加载的场景，建议使用事件委托或者在幻灯片渲染完成后再绑定事件，避免事件失效。

内容的提问来源于stack exchange，提问作者M Katz