Question

我遇到了用于Parallax和平滑滚动的SKrollr.js插件的问题。一切都很好，除了Bootstrap旋转木马，并且我确定任何旋转木马。它显然是一个显示：当插件在加载时设置自己并且无法看到任何.item类时没有问题。但我无法弄清楚如何让Skrollr在渲染时看到所有幻灯片/ .item类。

我甚至试过这种东西。我的Skrollr标记不是代码总是适用于我的问题。

Skrollr Markup

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，或者你可以看到它全屏调试here

抱歉，我的模糊和一般，因为我知道我的HTML是可靠的。检查小提琴。滑块功能很好，Skrollr无法在运行时看到隐藏的幻灯片，这就是问题所在。我只需要一个更好的解决方案来解决这个问题。

Answer 1

我猜你需要刷新，因为我发现如果我调整浏览器的大小，它就会有效。

试试这段代码：

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

如果需要，您可以将超时更改为1000，以确保一切都已加载。

Skrollr.js插件不是Parallaxing内部Bootstrap Carousel - 小提琴提供

1 个答案: