Trying to use multiple instances of TwentyTwenty, but some return height as 0 and do not display

Question

I don’t know what happens or when it changed, but this is a real problem.

There are thumbnails that relate to hiding / showing the main divs above that contain the full TwentyTwenty slider.

The problem is that there is no logic in it when the sliders of the slider are displayed, and when they have a height set to 0 on them. When you load them, some of them show, some do not, and when you resize the window often displays the current one hidden, but none of the others will show.

Is there anyone who knows about javascript that can help me? This is what I use as a JS script

function showSlide(slideNumber) { $(".image-compare-set").hide(); $('.image-compare-set[data-image-num="' + slideNumber + '"]').show(); } $(".twentytwenty").twentytwenty(); $(".image-compare-nav img").click(function() { showSlide( $(this).attr('data-image-num') ); }); showSlide(1); 

Answer 1

I tested a little and was able to find a template that could lead to a solution. It looks like your showSlide function is ok. However, I suspect that calling $(".twentytwenty").twentytwenty(); may cause strange behavior.

After reading the “Settings” section at http://zurb.com/playground/twentytwenty , he says

Then call twenty thirty () in this container after loading the images:

I guess somehow $(".twentytwenty").twentytwenty(); gets a call before , any necessary operation on images (which will ruin the div container); Or they are not even called at all after the div is hidden and displayed (from the start of showSlide ).

I suspect this is true because of the test. I downloaded the url and saw that the main div is not showing (as if it was actually hidden). Then, in the console, I typed jQuery(".twentytwenty").twentytwenty() and saw that soon after that the main container was displayed normally. Each time a new thumb is pressed, the same behavior is repeated.

Given that it is difficult to point out the probable cause without having access to the code and testing it, I would make a wild assumption here: try to make your showSlide function as

 function showSlide(slideNumber) { $(".image-compare-set").hide(); $('.image-compare-set[data-image-num="' + slideNumber + '"]').show(); $(".twentytwenty").twentytwenty(); //line added } 

to ensure that twentytwenty() is called to “update” the main container every time you change slides by clicking with your thumbs.