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

Question

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.

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

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');
    }
});

EDIT

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

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.

Answer 1

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

Try this code:

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

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