水平滚动滑块/轮播答案

【问题标题】：Horizontal scrolling slider / carousel水平滚动滑块/轮播
【发布时间】：2022-01-03 15:47:22
【问题描述】：

我在一个项目页面上工作，我想要一个水平滚动项目/图像滑块。无论我尝试什么，我似乎都无法让它发挥作用。

这是设计，项目需要根据鼠标滚轮向下滚动来滑动。 Design of what i want to achieve

我使用 tailwind 和 html / javascript。

如果有人知道解决方案，将不胜感激。

The homepage slider on this we bsite 是我正在寻找的东西的一个典型例子

【问题讨论】：

标签： javascript html css tailwind-css horizontal-scrolling

【解决方案1】：

尝试在此处共享代码 sn-p。据我了解，您想要实现的只是一个简单的水平滚动

试试这个

.parent {
  max-width: 100%;
  overflow: auto;
  white-space: nowrap;
}

.parent img {
  margin-right: 20px
}

<div class='parent'>
  <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" />
  <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" />
  <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" />
  <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" />
  <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" />
  <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" />
  <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" />
  <img src="https://cdn.britannica.com/q:60/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg" alt="cat photo" height="300px" width="200px" /></div>

或者你可以在顺风中使用实用程序

https://tailwindcss.com/docs/overflow#scroll-horizontally-always

【讨论】：

【解决方案2】：

如果你使用 Tailwind，你应该能够通过给你正在处理的元素类 overflow-y-auto 来实现你想要的，就像这样：

<div class="overflow-y-auto"></div>

【讨论】：

【解决方案3】：

这是我为您创建的演示。 Demo

你可以使用 slick.js 轻松实现你的目标，slick slider 默认没有滚轮控制功能，但是你可以使用下面的 sn-p 构建一个。

$("my_slider").on('wheel', (function(e) {
  e.preventDefault();
  if (e.originalEvent.deltaY < 0) {
    $(this).slick('slickNext');
  } else {
    $(this).slick('slickPrev');
  }
}));

【讨论】：