纯 CSS 轮播 | CSS-Tricks

在构建轮播/幻灯片时，HTML 和 CSS 的功能令人惊叹您能走多远。

使用 CSS Flexbox 将一些方框放在水平行中很容易。
使用 overflow 每次只显示一个方框，并使用 overscroll-behavior 使其可滑动很容易。
您可以使用 scroll-snap-type 使“幻灯片”整齐地排列。
您只需要几个 #jump-links 即可为其创建导航，您可以使用 scroll-behavior 使其变得平滑美观。

Christian Schaefer 进一步增加了“下一个”和“上一个”按钮，以及一个自动播放功能，该功能在开始交互后会停止播放。

关于自动播放功能，这是一个真正的 CSS 技巧

首先，我缓慢地将滚动捕捉点向右偏移，使滚动区域由于捕捉到它们而随之移动。

滚动完整个幻灯片的宽度后，我取消了捕捉。滚动区域现在与滚动捕捉点分离。

现在，我让滚动捕捉点跳回到它们的初始位置，而不会让它们“捕捉拖动”滚动区域回到它们。

然后，我重新启用捕捉，现在可以让滚动区域捕捉到不同的捕捉点 🤯

酷。

JavaScript 驱动的幻灯片（例如，使用 Flickty）也很不错。只是用这么少的代码完成它真的很酷。

说到我们能用 HTML 和 CSS 做到什么程度，这里有一些关于图像轮播和画廊的相关内容。

如何制作纯 CSS 轮播（Robin Rendle）
如何使用 React 和 CSS 网格构建无限滚动图像画廊（DigitalOcean）
超级灵活的 CSS 轮播，通过 JavaScript 导航增强（Maks Akymenko）
轮播不必复杂（Chris Coyier）

Julien

# 2020 年 1 月 10 日

这正是 Bulma 所缺少的！

David Bachmann

# 2020 年 1 月 13 日

这是一个来自几年前的有趣的自动播放示例 :) https://codepen.io/dbj/details/XNmvYo

Bruno

# 2020 年 1 月 13 日

我在 React 中尝试了它，但出于某种原因按钮不起作用。有人知道为什么吗？

https://codesandbox.io/s/dreamy-currying-mmic6

Frank Boës

# 2020 年 1 月 14 日

我还注意到第一个示例的滚动条在 Firefox（Windows）中看起来有点难看，第二个示例在 Firefox（Windows）中点击大按钮时不起作用。

Brandon Still

# 2020 年 2 月 24 日

有没有现代的方法可以防止“锚点跳跃”——例如，我在页面中间使用它，并且不希望滑块每次用户点击滑块导航时跳到顶部（使用您的第一种方法）……

Randall Rensch

评论永久链接# 2022 年 6 月 4 日

我也是。我不介意跳到页面上的某个 ID 点，但我使用的场景需要一些文本在轮播上方可见。此外，我打算将（CSS）文本按钮放在轮播上方，而不是底部的点。我可以通过将“底部”规范更改为“顶部”负数来将它们笨拙地放置到那个位置，但点击轮播页面会将其滚动到窗口顶部，使上面的所有内容都消失。

为了回答其他人的问题，重新定位是因为代码通过 <a> 跳转到另一个指定的锚点来更改帧。但跳转不仅会将视图侧向移动，还会将其移动到浏览器窗口的顶部。据我所知，没有办法只侧向跳转。

目前，我正在尝试使用各种位置设置，但前景似乎不太好，我认为负位置始终是一种笨拙的方法。
Christine

评论永久链接# 2022 年 8 月 10 日

这场派对晚了 2.5 年，但我找到了一个解决方案，这个解决方案来自这个网站。
https://markus.oberlehner.net/blog/super-simple-progressively-enhanced-carousel-with-css-scroll-snap/

作者使用 JS 事件监听器来防止跳转。对我来说非常有效。

Katie Ferguson

# 2021 年 10 月 31 日

您好！我正在尝试使用您在这里发布的纯 CSS 轮播，但我无法弄清楚如何摆脱它顶部的数字，比如“1”、“2”等等。我该如何摆脱它们？我将图像放在轮播的背景中，这些数字在图像顶部看起来很糟糕。

John Dunn

评论永久链接# 2021 年 11 月 22 日
您好 Katie，

我也有这个问题，这是因为我没有包含这部分代码，这部分代码会删除列表样式——
```
ol, li {
list-style: none;
margin: 0;
padding: 0;
}
```
Randall Rensch

评论永久链接# 2022 年 6 月 4 日

它是一个递增的计数器，由一个内容值插入。我认为您可以简单地用空字符串替换该值来摆脱它。但如果您不需要计数器，最好删除定义它的代码，以及省略此内容行。
在下面，我已经注释掉了原始代码，并替换了它

.carousel__slide:before {
/* content: counter(item); */
content: “” ;

James

# 2021 年 12 月 1 日

您好，我想知道如何使按钮处于活动状态，具体取决于您按下了哪个按钮或滑动到了哪个屏幕？

Steve Sims

# 2021 年 12 月 10 日

我想修改这个版本，在我的网站上添加一个标题轮播 https://www.stevesims.com。我可以问一下您如何隐藏导航箭头吗？

Randall Rensch

评论永久链接# 2022 年 6 月 4 日

侧面按钮在 CSS 代码的这部分定义。删除此样式将使它们消失。我没有测试过该区域是否仍然是热点。我自己想要“上一个”/“下一个”按钮，但它们应该移动到幻灯片区域之外或变得透明（取决于轮播在整个页面中的位置），这样它们就不会遮挡内容，内容可能是文本或重要的图像细节。

.carousel::before,
.carousel::after {
content: ”;
z-index: 1;
background-color: #333;
background-size: 1.5rem 1.5rem;
background-repeat: no-repeat;
background-position: center center;
color: #fff;
font-size: 2.5rem;
line-height: 4rem;
text-align: center;
pointer-events: none;
}

Michal

# 2022 年 1 月 11 日

您好，我使用了纯 CSS 版本，一切都正常，除了当我将轮播放在 CSS 网格上时。每次我点击任何控制按钮时，页面都会聚焦到轮播上（将页面向下滚动并隐藏顶部菜单）。我如何阻止这些焦点？

Shriram Sharma

# 2022 年 1 月 26 日

Christian Schaefer 的轮播中有一个错误——当您遍历到轮播中的最后一张图像，然后返回第一张图像时，“下一个”按钮不起作用。有什么办法可以阻止这种情况吗？

Vineet Kapoor

# 2022 年 1 月 27 日

我尝试了两个纯 CSS 轮播。每次按下 #jump-link 时，除了执行预期操作之外，它还会将方框跳到页面的顶部。不确定是什么原因导致了这种行为。请帮助我阻止这种情况。参考链接

https://www.hotlink.com/page/SIY00WE7CKD6/INOYHMTDX1IM

此外，在自动滑动中，“下一个”按钮在使用其他按钮之前不起作用。

Antoine

# 2022 年 3 月 16 日

您知道我什么时候可以根据图像更改数字吗？

Kevin Bogantes

# 2022 年 3 月 29 日

您好
我有一个问题，我如何将数字更改为每个幻灯片的不同图像？

duns

# 2022 年 5 月 4 日

我注意到此代码不允许在幻灯片内使用链接。有什么办法可以解决吗？

Randall Rensch

# 2022 年 6 月 4 日

我喜欢 Christian Schaefer 的纯 CSS 版本，我想要侧向滚动按钮。并且自动滚动很有趣，因为在某些情况下，它可以提醒用户更改是可能的。但从侧面按钮和将底部按钮改为顶部的文本按钮来看，这很明显。（请参阅我关于此的其他评论。）

但是有两个问题：1. 它并没有真正展示内容的范围，因为它只是将第一张幻灯片移回原位。2. 自动滚动只在点击或悬停时暂停。如果用户将光标移开，它会继续滚动，这真的很烦人。

那么我们如何完全省略自动滚动呢？我恐怕我不理解解释，只能通过反复尝试来修改。

此评论主题已关闭。如果您有重要信息需要分享，请联系我们。