纯CSS轮播仅在移动端生效，如何实现桌面端鼠标滑动切换？

你的纯CSS轮播在桌面端无法用鼠标切换，核心原因是桌面浏览器默认不支持横向滚动容器的鼠标拖拽滚动，移动端的触摸操作是原生支持的，所以能正常运行。下面提供几种实用的解决方法：

方法1：实现鼠标拖拽滚动（贴近移动端体验） #

只需添加少量JS代码，就能让桌面端支持鼠标拖拽滑动，同时可以加样式提升交互感：

JS 代码 #

const galeria = document.querySelector('.galeria');
let isDown = false;
let startX;
let scrollLeft;

galeria.addEventListener('mousedown', (e) => {
  isDown = true;
  galeria.classList.add('active');
  startX = e.pageX - galeria.offsetLeft;
  scrollLeft = galeria.scrollLeft;
});
galeria.addEventListener('mouseleave', () => {
  isDown = false;
  galeria.classList.remove('active');
});
galeria.addEventListener('mouseup', () => {
  isDown = false;
  galeria.classList.remove('active');
});
galeria.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - galeria.offsetLeft;
  const walk = (x - startX) * 1.5; // 可调整拖拽灵敏度
  galeria.scrollLeft = scrollLeft - walk;
});

补充CSS样式 #

.galeria {
  cursor: grab;
  /* 保留你原有的CSS属性 */
  width: 35rem;
  height: 22rem;
  position: relative;
  display: flex;
  overflow: auto;
  scroll-snap-type: x mandatory;
}

.galeria.active {
  cursor: grabbing;
}

/* 保留原有图片样式 */
.galeria img {
  width: 100%;
  height: 100%;
  position: sticky;
  left: 0;
  flex-shrink: 0;
  object-fit: cover;
  scroll-snap-align: start;
}

方法2：用鼠标滚轮控制横向滚动 #

如果更习惯使用滚轮操作，可以通过JS将垂直滚轮事件转为横向滚动：

JS 代码 #

const galeria = document.querySelector('.galeria');
galeria.addEventListener('wheel', (e) => {
  e.preventDefault();
  galeria.scrollBy({
    left: e.deltaY < 0 ? -300 : 300, // 调整滚动步长
    behavior: 'smooth'
  });
});

可选：隐藏滚动条 #

如果不想显示默认横向滚动条，可补充CSS：

.galeria {
  scrollbar-width: none; /* 火狐浏览器 */
}

.galeria::-webkit-scrollbar {
  display: none; /* WebKit内核浏览器 */
}

方法3：添加手动导航按钮 #

如果需要更直观的操作入口，可以给轮播添加前后切换按钮，适配所有设备：

修改后的HTML #

<div class="galeria-container">
  <button class="carousel-btn prev-btn">&lt;</button>
  <div class="galeria">
    <img src="img-1.png" />
    <img src="img-2.png" />
  </div>
  <button class="carousel-btn next-btn">&gt;</button>
</div>

补充CSS样式 #

.galeria-container {
  position: relative;
  width: 35rem;
  margin: 0 auto;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
}

.prev-btn {
  left: 1rem;
}

.next-btn {
  right: 1rem;
}

/* 保留原有.galeria和图片样式 */

JS 切换逻辑 #

const galeria = document.querySelector('.galeria');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

prevBtn.addEventListener('click', () => {
  galeria.scrollBy({ left: -galeria.offsetWidth, behavior: 'smooth' });
});

nextBtn.addEventListener('click', () => {
  galeria.scrollBy({ left: galeria.offsetWidth, behavior: 'smooth' });
});

内容的提问来源于stack exchange，提问作者Sudo Sur