CSS 幻灯片视频库答案

【问题标题】：CSS Slideshow Video GalleryCSS 幻灯片视频库
【发布时间】：2021-08-15 06:49:31
【问题描述】：

有人知道如何制作幻灯片视频库吗？我一直在寻找这个，但我能找到的只是幻灯片图像画廊。如果有人知道有什么可以参考的，请告诉我吗？

这就是我想用 CSS 制作视频库的方式

【问题讨论】：

标签： html css slideshow video-gallery

【解决方案1】：

您可以使用 CSS 的 snap scroll 属性来制作这种效果。

这里有一些有用的学习链接。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap

https://css-tricks.com/practical-css-scroll-snapping/

或者你可以使用：scroll-direction: horizontal;

https://css-tricks.com/pure-css-horizontal-scrolling/

或者通过一些技巧和动画，你可以像这样实现它

https://codepen.io/Schepp/pen/WNbQByE

最后一部分是使用非常简单的视频，只需将图像或文本替换为视频标签或 youtube 视频 iframe。

就是这样……

【讨论】：

感谢您提供这些资源！
嗨 Nasheetat，如果这有助于请将其标记为正确答案或者您需要其他任何内容，请告诉我

【解决方案2】：

如果您能够制作图片库，那么您只需将代码<img src="file.png"/> 中的图片标签更改为视频标签即可。

例如：
<video width="300" height="250" controls>
<source src="movie.mp4" type="video/mp4">
</video>

【讨论】：