基于Slick Carousel实现前后对比滑块自动轮播的问题求助

问题概述 #

要实现前后对比滑块并作为Slick Carousel的轮播项，替换原有图片后遇到两个问题：

• .handle-circle 中的 » 实体未正确渲染，显示为绿色的代码文本
• 对比滑块的鼠标移动事件失效，无法拖动进行图片对比

问题1：HTML实体未正确渲染的修复 #

原因 #

HTML中错误地使用了嵌套转义的实体代码 »，导致浏览器解析为文本而非对应符号。

修复方式 #

直接使用符号本身或正确的HTML实体代码：

• 将 « » 替换为 « »（直接使用符号）
• 或替换为 « »（正确的实体代码，无需嵌套转义）

问题2：鼠标移动事件失效的修复 #

原因 #

1. 多个滑块共用同一个 id="image-slider"，document.querySelector 仅能获取第一个元素，导致后续滑块未绑定事件
2. isSliderLocked 初始逻辑错误，默认锁定了交互
3. Slick轮播初始化会修改DOM结构，原始事件绑定可能失效

修复方式 #

• 将 id="image-slider" 改为类名 class="image-slider"，遍历所有滑块绑定事件
• 设置 isSliderLocked 默认值为 false，允许初始交互
• 在交互时暂停轮播，结束后恢复，提升用户体验

修复后的完整代码 #

HTML #

<section id="slider" style="background-color:#fefefe;height: 800px;">
  <div class="horizontal">
    <div class="image-slider">
      <img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
      <div class="img-wrapper">
        <img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
      </div>
      <div class="handle">
        <div class="handle-line"></div>
        <div class="handle-circle">
          « »
        </div>
        <div class="handle-line"></div>
      </div>
    </div>

    <div class="image-slider">
      <img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
      <div class="img-wrapper">
        <img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
      </div>
      <div class="handle">
        <div class="handle-line"></div>
        <div class="handle-circle">
          « »
        </div>
        <div class="handle-line"></div>
      </div>
    </div>

    <div class="image-slider">
      <img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
      <div class="img-wrapper">
        <img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
      </div>
      <div class="handle">
        <div class="handle-line"></div>
        <div class="handle-circle">
          « »
        </div>
        <div class="handle-line"></div>
      </div>
    </div>
  </div>
</section>

CSS #

#slider img {
  width: 350px;
  height: 350px;
  margin-right: 100px;
}

.horizontal {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --image-slider-width: min(80vw, 768px);
  --image-slider-handle-width: 50px;
}

.image-slider {
  position: relative;
  width: var(--image-slider-width);
  overflow: hidden;
  border-radius: 1em;
  box-shadow: -4px 5px 10px 1px gray;
  cursor: col-resize;
}

.image-slider img {
  display: block;
  width: var(--image-slider-width);
  height: auto;
  max-height: 80vh;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.image-slider .img-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  z-index: 1;
}

.image-slider .img-wrapper img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  filter: grayscale(100%);
  transform: scale(1.2);
}

.image-slider .handle {
  position: absolute;
  top: 0;
  left: calc(50% - var(--image-slider-handle-width)/2);
  width: var(--image-slider-handle-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  z-index: 2;
}

.image-slider .handle-circle {
  width: var(--image-slider-handle-width);
  height: var(--image-slider-handle-width);
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.image-slider .handle-line {
  width: 2px;
  flex-grow: 1;
  background: white;
}

@media (max-width: 768px) {
  :root {
    --image-slider-width: 90vw;
  }
}

JavaScript #

// 初始化Slick轮播
$('.horizontal').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 3000,
  pauseOnHover: true
});

// 为每个对比滑块绑定交互事件
document.querySelectorAll('.image-slider').forEach(slider => {
  const wrapper = slider.querySelector('.img-wrapper');
  const handle = slider.querySelector('.handle');
  let isSliderLocked = false;

  function sliderMouseMove(event) {
    if (isSliderLocked) return;

    const sliderLeftX = slider.offsetLeft;
    const sliderWidth = slider.clientWidth;
    const sliderHandleWidth = handle.clientWidth;

    let mouseX = (event.clientX || event.touches[0]?.clientX) - sliderLeftX;
    mouseX = Math.max(0, Math.min(sliderWidth, mouseX));

    wrapper.style.width = `${((1 - mouseX/sliderWidth) * 100).toFixed(4)}%`;
    handle.style.left = `calc(${((mouseX/sliderWidth) * 100).toFixed(4)}% - ${sliderHandleWidth/2}px)`;
  }

  function sliderMouseDown(event) {
    isSliderLocked = false;
    sliderMouseMove(event);
    $('.horizontal').slick('slickPause');
  }

  function sliderMouseUp() {
    isSliderLocked = true;
    $('.horizontal').slick('slickPlay');
  }

  function sliderMouseLeave() {
    isSliderLocked = true;
    $('.horizontal').slick('slickPlay');
  }

  // 绑定事件
  slider.addEventListener("mousemove", sliderMouseMove);
  slider.addEventListener("touchmove", sliderMouseMove);
  slider.addEventListener("mousedown", sliderMouseDown);
  slider.addEventListener("touchstart", sliderMouseDown);
  slider.addEventListener("mouseup", sliderMouseUp);
  slider.addEventListener("touchend", sliderMouseUp);
  slider.addEventListener("mouseleave", sliderMouseLeave);
});

内容的提问来源于stack exchange，提问作者Sahil Singh