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

Question

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

<div class="fullpage">

在身体的顶部，带有相应的CSS：

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

当显示幻灯片时，有没有办法让图像向侧面移动。

这是迄今为止我所得到的jsfiddle。

Answer 1

是的！您需要加入滑块库的活动。

你使用的插件是什么？或者你自己写的？

无论哪种方式，大多数插件幻灯片库都有类似＆＃34; onSlideStart＆＃34;等事件。或类似的东西，然后你可以用来更新你的背景。

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

希望这有帮助！ ：）