Flickity won't resize in tabs

[Wouter2huis]

Hi,

I'm trying to get a flickity slider to work within my tabs. But when I open the second tab the slider is small and won't resize. I've looked at some other similar issues reported here and added the resize method but it doesn't seem to work (yet). It's nearly there.

Take a look at this pen: https://codepen.io/Wous/pen/qeEvJj (you might want to use the full page view). I you click the "Smartphone" tab button then you'll see the smartphone slider, but not full size. Now if you click the button again, then it fully works. But if you click the "Laptop" button then the same thing occurs.

I'm not a coder so I'm not really sure what to change or add, but I get the feeling I'm nearly there.

Hope you can help me, thanks in advance!

[himalayanath]

Hi Sir,

I have the same issue

https://codepen.io/himalayanath/pen/xvgyoO

[Wouter2huis]

Hi, I see yes. So it's not just me. :) Perhaps a little bug or incomatibility with tabs then. Hope the author will provide us with a fix or workaround.

[rodolforizzo76]

I also have the same problem, you can see it here live: https://www.fiorinaedizioni.com/sito-oxygen/ Has anyone solved this problem?

[desandro]

See resize method

If Flickity is initialized when hidden, like within a tab, trigger resize after it is shown so cells are properly measured and positioned.

$('.button').on( 'click', function() {
  $carousel.show()
    // resize after un-hiding Flickity
    .flickity('resize');
});

[Wouter2huis]

Hi, thanks for your reaction. I've tried it but it doesn't really work 100% yet. I need to click the button to resize the slider twice to get the desired effect. I've updated my codepen so you can see what I mean: https://codepen.io/Wous/pen/qeEvJj

Any thoughts?

[desandro]

If this is using a bootstrap tab navigation, you may need to use a Bootstrap event:

var $carousel = $(".carousel");

$('.nav').on('shown.bs.tab', function (e) {
  $carousel.flickity('resize');
});

[Wouter2huis]

I've tried it, but no luck unfortunately. The code in the pen does work in the end, only thing is I need to click the button twice to get the resize to happen. Do you think the shown.bs.modal perhaps needs to be combined with something? I'm no coder so I wouldn't really know to...

[MikeyJN]

I think what is happening here is that 'resize' is firing before the viewport is ready - try adding a slight delay before it's triggered:

var $carousel = $(".carousel");

$(".button").on("click", function() {
  setTimeout(function() {
    $carousel.show()
      // resize after un-hiding Flickity
      .flickity("resize");
  }, 500); // sets 0.5 second delay before 'resize' is triggered
});

Let me know if it fixes it,

Mike

[MikeyJN]

I just tried the above on your link and it works for me and you may even get away with reducing the delay from 500 to 200 - have a play around and set it to what works best for you...

[Wouter2huis]

Hi, thanks! This indeed does the trick. I've set the delay to 200 and that makes it pretty seamless.

[desandro]

setTimeout is a hack. I've revised my code to use the proper event name: shown.bs.tab. See demo https://codepen.io/desandro/pen/a653fbbc27f8bc2986b3c470da5dd4f6?editors=1011

var $carousel = $(".carousel");

$('.nav').on('shown.bs.tab', function (e) {
  $carousel.flickity('resize');
});

[Wouter2huis]

Cool, better yes. Thanks!