TwentyTwenty has height issues when used with Owl Carousel

[ghost]

This has always been a bit of an on-going issue since I started using these two items together. I know that I definitely want to use them both, and there must be a way to do it, as I've seen it used on other sites.

Anyway, I've tried using the 20/20 on it's own, and it seems to work fine when static. I've also used Owl Carousel 2 on it's own with static images, and that seems to work fine too.

But when I try to combine them, so I have multiple instances of 20/20 as 'slides' in Owl Carousel, there is an issue regarding the height of the 20/20 container, when resizing the windows.

This leads to issues when rotating mobile devices, and changing browser sizes. Usually, it sometimes gets fixed by resizing and after letting go of the mouse buttons, it may change. But sometimes it does not.

I've tried using the window.resize in the past, but that doesn't seem to make any difference.

A good example of this can be found at https://www.bellavou.co.uk/face/facelift/ - Try resizing the browser window when viewing the 20/20 slider, and after a while, you'll start to see gaps making the slide container appear huge, and not resizing with the browser.

I'm not sure what I can do, but I'm open to all suggestions and all help is appreciated! Sorry for the wordy issue...

[mhayes]

Hey @leecollings I see the issue. Seems like both Owl and TwentyTwenty make use of the window resize event. It appears that Owl updates the width of the carousel container during the resize event AFTER TwentyTwenty has already performed its resizing calculations.

But there is hope! I found a hack to make it work for like you would expect. What it essentially does is listens for the Owl resized.owl.carousel event which indicates the Owl carousel container has finished resizing itself. At this point we can trigger another window resize event which TwentyTwenty looks for and it will base its calculations on the new container width. I tried it on your site and it appears to fix the issue:

jQuery('.owl-carousel').on('resized.owl.carousel', function(event) {
  jQuery(window).trigger("resize");
});

There are probably better solutions out there ... but I hope this helps you out. Cheers!

[ghost]

Hey there, thanks for your comment, that's been really helpful.

Although maybe I'm doing it wrong, but although the resize is working, it seems everytime the window is resized, I'm just adding another instance of 2020 ontop of my existing one (I can tell this from the slider line getting a thicker shadow everytime).

// load TwentyTwenty after the page has loaded
$(window).load(function(){
    $(".twentytwenty").twentytwenty();
});

// reload TwentyTwenty on page resize/orientation
$('.owl-carousel').on('resized.owl.carousel', function(event) {
    $(window).trigger("resize");
    $(".twentytwenty").twentytwenty();
});

Am I able to rather than initialise 2020 for another time, just re-initialise it?

[mhayes]

If I'm not mistaken I don't think it's necessary to re-initialize TwentyTwenty. You could rewrite the code as follows:

// load TwentyTwenty after the page has loaded
$(window).load(function(){
    $(".twentytwenty").twentytwenty();
});

// reload TwentyTwenty on page resize/orientation
$('.owl-carousel').on('resized.owl.carousel', function(event) {
    $(window).trigger("resize");
    // Commenting this code out
    //$(".twentytwenty").twentytwenty();
});

However it's been a little while since I've looked at the code. If that doesn't work can you post a link to your site? Thanks!

[ghost]

Hmm it still doesn't seem to be resizing if I emulate orientation changes on iPad viewing.

It's fine when going from portrait to landscape, as the slider scales up, but when going back to portrait, the slider scales down but it's container height remains, leaving an ugly white box of space underneath.

You can view the page at: http://development.bellavou.co.uk/face/facelift/ but there's authentication applied to this subdomain.

Are you able to email me via my website, and send me your Skype IP and we can talk on there?