如何制作图像中的 slider？ 可滚动并带有文本和图像

Question

我想制作一个 slider 带有可滚动的右对齐图像和图像中的文本，我该怎么做？ https://prnt.sc/26mtj6v

Answer 1

我正在发送一个示例站点和图片，您可以查看它。 我发送的图像有一个可滚动的图像和一个文本框部分。 第二张图片的一半将可见，当您在 slider 逻辑中向左滑动时，2 张图片将出现在前面，框内的文本将发生变化。

https://prnt.sc/26mtuw6

虽然不完全相同，但我们在本网站上的最新项目部分是一个示例http://paul-themes.com/html/liarch/home-default.html

Answer 2

如果您想制作如下图所示的设计：

---

1）您将需要在容器上使用一些display: flex以便将元素排成一行并彼此相邻

2）您需要使用overflow-x:scroll使该容器可滚动

3）您需要为需要在position: absolute并为其指定top/bottom/right/left坐标

5）您需要您的容器位于position: relative中，因此标题/段落（第 3 步）的放置取决于容器

6）您需要为您的 imgs 提供足够大的width ，以便滚动实际开始工作（您需要容器内的元素大于容器的总宽度，以便它变得可滚动）

---

这是我做的一个简单的例子：

---

这是我的示例的代码

HTML：

CSS：