水平滚动 slider / 轮播

Question

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

这就是设计，项目需要根据鼠标滚轮向下滚动来滑动。 我想要实现的设计

我使用顺风和 html / javascript。

如果有人知道将非常感激的解决方案。

我们网站上的主页 slider是我正在寻找的东西的一个典型例子

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

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

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

Answer 3

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

您可以使用 slick.js 轻松实现您的目标，slick slider 默认没有滚轮控件 function，但您可以使用下面的代码段构建一个。

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