自动滑动背景图像中的问题 - Html 和 Css
Problem in Automatic Sliding Background Images - Html and Css
我正在尝试制作背景图片幻灯片，它会在一段时间后自动将图片向左浮动，我的幻灯片有 6 张图片，但只有第一张图片向左滑动，然后什么也没有发生，也许吧，它看起来和所有其他图片一样被第一张图片覆盖了吗？
我的代码要点（只有 50 行）
: https://gist.github.com/Reevan799/da93136825c318e0d91b73887ec408ed
我正在尝试从这个 youtube 教程中做到这一点
: https://youtu.be/Wyfgv7LLno4
其实主要问题是你设置你.slider figure { width: 500%; }，然后.slider figure div { width: 100%; }。
假设您的视口宽度为 1366px，那么 500% 为 6830px，您宽度为 100% 的内部 div 将获得 6830px 的完整宽度，而不仅仅是 1366px。
将设置快速修复 .slider figure div { width: 100vw; } 使用视口宽度 %。
你的 css 也有点乱，比如 类 订单，你正在使用标签和样式背景，在这种情况下，一个不错的方法是将图像设置为背景-image 然后使用属性 background-cover 开始工作并变得很好。
这是一个 fiddle：
https://jsfiddle.net/07dgsq12/
PS: 抱歉我的英语不好
我正在尝试制作背景图片幻灯片，它会在一段时间后自动将图片向左浮动，我的幻灯片有 6 张图片，但只有第一张图片向左滑动，然后什么也没有发生，也许吧，它看起来和所有其他图片一样被第一张图片覆盖了吗？
我的代码要点（只有 50 行） : https://gist.github.com/Reevan799/da93136825c318e0d91b73887ec408ed
我正在尝试从这个 youtube 教程中做到这一点 : https://youtu.be/Wyfgv7LLno4
其实主要问题是你设置你.slider figure { width: 500%; }，然后.slider figure div { width: 100%; }。
假设您的视口宽度为 1366px，那么 500% 为 6830px，您宽度为 100% 的内部 div 将获得 6830px 的完整宽度，而不仅仅是 1366px。
将设置快速修复 .slider figure div { width: 100vw; } 使用视口宽度 %。
你的 css 也有点乱，比如 类 订单，你正在使用标签和样式背景，在这种情况下，一个不错的方法是将图像设置为背景-image 然后使用属性 background-cover 开始工作并变得很好。
这是一个 fiddle： https://jsfiddle.net/07dgsq12/
PS: 抱歉我的英语不好