水平滚动滑块/轮播

Question

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

这是这样的设计，项目需要根据鼠标滚轮向下滚动来滑动。

我想要实现的设计：

我使用 Tailwind 和 HTML / JavaScript。

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

这个网站上的主页滑块是我正在寻找的东西的一个很好的例子。

Answer 1

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

试试这个

.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

Answer 2

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

您可以使用 slick.js 轻松实现您的目标，slick 滑块默认没有滚轮控制功能，但您可以使用下面的代码片段构建一个。

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

Answer 3

如果您使用 Tailwind，您应该能够通过为您正在处理的元素提供一个溢出-y-auto 类来实现您想要的目标，如下所示：

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