js实现图片左右滑动并点击时候放大

<div class="slider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.slider img {
  width: 100%;
  scroll-snap-align: start;
}

document.querySelectorAll('.slider img').forEach(img => {
  img.addEventListener('click', function() {
    // 创建一个全屏的图片查看器
    const viewer = document.createElement('div');
    viewer.style.position = 'fixed';
    viewer.style.top = '0';
    viewer.style.left = '0';
    viewer.style.width = '100%';
    viewer.style.height = '100%';
    viewer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    viewer.style.display = 'flex';
    viewer.style.justifyContent = 'center';
    viewer.style.alignItems = 'center';
    viewer.style.zIndex = '1000';

    const fullImg = document.createElement('img');
    fullImg.src = this.src;
    fullImg.style.maxWidth = '90%';
    fullImg.style.maxHeight = '90%';

    viewer.appendChild(fullImg);
    document.body.appendChild(viewer);

    // 关闭查看器
    viewer.addEventListener('click', function() {
      document.body.removeChild(viewer);
    });
  });
});