html - CSS 幻灯片视频库

Question

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

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

Answer 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-horizo​​ntal-scrolling/

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

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

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

就是这样...

Answer 2

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

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