水平滚动滑块/轮播

Question

我正在处理一个项目页面，我想要一个水平滚动 project/image 滑块。无论我尝试什么，我似乎都无法让它发挥作用。

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

我使用 tailwind 和 html / javascript。

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

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

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>

或者您可以使用 tailwind 中的实用程序

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

Answer 2

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

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

Answer 3

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

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

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

水平滚动滑块/轮播

Horizontal scrolling slider / carousel

html

javascript

css

horizontal-scrolling

tailwind-css