No divs displayed when used in any carousel or slider

[ghost]

I have multiple instances of TwentyTwenty, that at the moment, are stacked ontop of each other, with thumbnails underneath. When each of the thumbnail is clicked, the relevant 20/20 slider is displayed by a combination of CSS display/hide, and data-image to link up the slider to the thumbnail.

However, I would like to put the 20/20 sliders into a carousel, and be able to cycle through them with left and right arrows. The problem is, any carousel I try to put these into (Bootstrap for example), requires a class of active to move around to a certain slider. Some of the sliders have no height, and it just looks messy.

There are loads of others who are saying about multiple sliders, having zero height properties, and so don't show.

Is there a tried and tested method of using multiple 20/20 sliders within a carousel?

[andywarren]

I'm having similar issues. I have the plugin configured correctly with multiple sets of before/after images, and am trying to put them into a Cycle2 slider. The Cycle2 slider works, but if I turn on the slider then the TwentyTwenty before/after image sets stop showing up. If the slider is turned off, the TwentyTwenty sets work just fine. Any help would be great.

[Hadryan]

I had the same issue with owl.carousal. What I've done is: In a separate file called presentation.js I've put the following code

(function ( $ ) {
    "use strict";
    $(function () {
        $(window).load(function() {
            $(".twentytwenty").twentytwenty();
        });
    });
}(jQuery));

Please make sure you call this file after all files: e.g.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.event.move.js"></script>
<script type="text/javascript" src="js/jquery.twentytwenty.js"></script>
<script type="text/javascript" src="js/presentation.js"></script>

Now, everything works fine ;-) @Hadryan

[ghost]

@Hadryan can you explain exactly what's happening there?

Unless I'm missing something, I don't see what difference it will make as in my init.js file (after all of the JS files) I am calling the slider like this:

$(window).load(function() {
            $(".twentytwenty").twentytwenty();
        });

What difference does your extra bit of lines do?

Just for the record, this didn't seem to make any difference to me. When resizing the window, it's still laggy and doesn't seem to nicely resize with OwlCarousel2 (which is what I'm using).