javascript - 水平滑动幻灯片？

Question

最近我看到了滑动画廊的趋势，我想知道构建它们的常用方法是什么？我知道 Slick Slider 允许滑动，但我很确定这些网站都没有使用标准的幻灯片插件。

也许有些人使用 Canvas？绿 socks ？示例如下:

https://collagecrafting.com/

http://artempivovarov.com/photo-gallery

谢谢

Answer 1

他们似乎在使用 CSS 动画，这也是最好/最简单的方法之一。 https://www.w3schools.com/css/css3_animations.asp

基本上，他们所做的就是改变它的位置。一个可以产生幻灯片效果的示例动画如下:

.slideLeft {
    position: absolute;
    left: 25%;
    animation-name: slideLeft;
    animation-duration: 2s;
}
@keyframes slideLeft {
    from {
        left: 25%;
    }
    to {
        left: 0%;
    }
}