Skrollr.js插件在Bootstrap Carousel内部不视差-提供了Fiddle [英] Skrollr.js Plugin Not Parallaxing Inside Bootstrap Carousel - Fiddle Provided

问题描述

我对用于视差和平滑滚动的SKrollr.js插件有问题.除了Bootstrap传送带以外，其他所有功能都正常，并且我确定与此有关的任何传送带都可以.显然，这是一个显示:插件加载时设置自身并且看不到任何.item类时，没有问题.但是我无法弄清楚到底如何让Skrollr在渲染时看到所有slides/.item类.

I am having a problem with the SKrollr.js plugin for Parallax and smooth scrolling. Everything works fine except Bootstrap carousel's, and im sure any carousel for that matter. It's clearly a display:none problem when the plugin is setting itself up on load and can't see any of the .item classes. But I can't figure out how on earth to get Skrollr to see all of the slides/.item classes when it's rendering.

我什至尝试了这种东西.我的Skrollr标记不是代码始终对我有用的问题.

I even tried this kinda stuff. My Skrollr markup isn't the problem that code always works for me.

滑行标记

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 这里，或者您可以全屏查看它进行调试此处

I made a JSFiddle for it here or you can see it fullscreen for debugging here

对不起，我当时模棱两可，因为我知道我的HTML很好.检查小提琴.滑块功能很好，这是Skrollr无法在运行时看到隐藏的幻灯片的问题.我只需要一个更好的解决方案来解决这个问题.

Sorry I was being vague and general because I know my HTML is solid. Check the fiddle. The slider functions just fine it's Skrollr not being able to see the hidden slides at runtime that is the problem. I just need a better solution to solve this.

推荐答案

我猜测您需要进行刷新，因为我注意到如果重新设置浏览器的大小，它就可以工作.

I'm guessing that you need to do a refresh since I notice it works if I resize the browser.

尝试以下代码:

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

如果有必要，您可以将超时时间更改为1000，以确保一切正常.

You can change the timeout to 1000 if necessary to ensure everything loads.

这篇关于Skrollr.js插件在Bootstrap Carousel内部不视差-提供了Fiddle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！