Skrollr.js 插件内部没有视差 Bootstrap 旋转木马 - Fiddle 已提供

Question

我在使用 SKrollr.js 视差和平滑滚动插件时遇到问题。除了 Bootstrap 旋转木马之外，一切都很好，而且我确定与此相关的任何旋转木马。当插件在加载时自行设置并且看不到任何 .item 类时，这显然是一个 display:none 问题。但我无法弄清楚到底如何让 Skrollr 在渲染时看到所有幻灯片/.item 类。

我什至尝试过这种东西。我的 Skrollr 标记不是代码总是对我有用的问题。

Skrollr 标记

data-10p-top-bottom="background-position-y: 100%;" data-bottom-top="background-position-y: 0%;"

CSS

.displaying {
    display: block !important;
}

JS

var sk = skrollr.init({
    forceHeight: false,
    beforerender: function(data) {
        $(".item").addClass('displaying');
    },
    render: function(data) {
        $(".item").removeClass('displaying');
    }
});

编辑

我为它做了一个 JSFiddle here or you can see it fullscreen for debugging here

抱歉，我的表述含糊笼统，因为我知道我的 HTML 是可靠的。检查 fiddle。滑块功能很好，问题在于 Skrollr 在运行时无法看到隐藏的幻灯片。我只需要一个更好的解决方案来解决这个问题。

Answer 1

我猜你需要刷新一下，因为我注意到如果我调整浏览器大小它就可以工作。

试试这个代码：

setTimeout(function () {
skrollr.get().refresh();
}, 0);

如有必要，您可以将超时更改为 1000，以确保加载所有内容。

Skrollr.js 插件内部没有视差 Bootstrap 旋转木马 - Fiddle 已提供

Skrollr.js Plugin Not Parallaxing Inside Bootstrap Carousel - Fiddle Provided

javascript

jquery

carousel

twitter-bootstrap

skrollr