跨多个部分和幻灯片的相同图像 fullpage.js

Question

我在我的站点中使用 Fullpage.js，并且想使用一张图像作为整个站点的背景，其中图像的不同部分显示为不同的部分并且滚动幻灯片。到目前为止，我已经设法通过添加以下部分来显示图像的不同部分：

<div class="fullpage">

正文顶部对应CSS:

.fullpage {
    background-image: url(../images/background_image.jpg);
    background-size: cover;
}

有什么方法可以让图像在显示幻灯片时横向移动。

这是 jsfiddle 目前为止我得到的。

Answer 1

是的！您需要连接到该滑块库的事件。

你用的是什么插件？还是你自己写的？

无论哪种方式，大多数插件幻灯片画廊都有类似 "onSlideStart" 或类似的事件，然后您可以使用它们来更新背景。

我首先编写一个脚本，然后将 onSlideStart 设置为一个计算滑块所在幻灯片的函数。然后你只需根据你所在的幻灯片将你的背景位置（或者更确切地说，动画）设置为正确的 x 值（你可以自己算出数学，是吗？）

希望对您有所帮助！ :)

Answer 2

最后我决定走另一条路，将图像转换成图块。然后将图像块分配给正确的幻灯片或部分。这允许图像从每张幻灯片或部分继续，而不必一次加载整个图像。