如何在javascript中的活动图像滑块的左侧和右侧包含有尖括号

<div class="slider">
  <img src="left_image.jpg" alt="Left Image">
  <img src="right_image.jpg" alt="Right Image">
</div>

.slider {
  position: relative;
  width: 300px; /* 设置滑块的宽度 */
  height: 200px; /* 设置滑块的高度 */
}

.slider img {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%; /* 设置左右图像的宽度为滑块宽度的一半 */
}

.slider img:first-child {
  left: 0; /* 左图像位于滑块的左侧 */
}

.slider img:last-child {
  right: 0; /* 右图像位于滑块的右侧 */
}

// 获取滑块元素
const slider = document.querySelector('.slider');

// 监听滑块的拖动事件
slider.addEventListener('mousedown', startDrag);
slider.addEventListener('touchstart', startDrag);

// 开始拖动滑块时的处理函数
function startDrag(event) {
  event.preventDefault(); // 阻止默认的拖动行为

  // 获取滑块的初始位置
  const initialPosition = event.clientX || event.touches[0].clientX;

  // 监听滑块的移动事件
  document.addEventListener('mousemove', drag);
  document.addEventListener('touchmove', drag);

  // 结束拖动滑块时的处理函数
  document.addEventListener('mouseup', stopDrag);
  document.addEventListener('touchend', stopDrag);

  // 滑块的移动处理函数
  function drag(event) {
    event.preventDefault(); // 阻止默认的拖动行为

    // 计算滑块的移动距离
    const currentPosition = event.clientX || event.touches[0].clientX;
    const distance = currentPosition - initialPosition;

    // 更新滑块的位置
    slider.style.transform = `translateX(${distance}px)`;
  }

  // 停止拖动滑块时的处理函数
  function stopDrag() {
    // 移除滑块的移动事件监听器
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('touchmove', drag);

    // 移除滑块的停止事件监听器
    document.removeEventListener('mouseup', stopDrag);
    document.removeEventListener('touchend', stopDrag);

    // 恢复滑块的初始位置
    slider.style.transform = 'translateX(0)';
  }
}