Flickity inside a Bootstrap dialog, is not sliding

[vd3d]

Hi,

When I put Flickity inside a bootstrap 4 modal, it does not slide.

I have a repro case here: https://codepen.io/cdemez/pen/LYpJjEp

BTW, I have try to init flickity just after the button click, but it does not help :-(

Do you have any idea ?

[desandro]

You likely need to trigger resize on shown. See https://github.com/metafizzy/flickity/issues/862#issuecomment-438707067

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

[vd3d]

Indeed, it works in the sample ... but not in my application :-(

Anyway, I do the following in Javascript (cannot make the HTML version work), when I click a button, I show the dialog, then update flickity

$('#myModal').modal('show');
var f = new Flickity(document.getElementById('myflickity'), { autoPlay: true });
f.resize();

Any idea ?

[desandro]

let $myModal = $('#myModal').modal('show');
let $myflickity = $('#myflickity').flickity({ autoPlay: true });
$myModal.on( 'shown.bs.modal', function() {
  $myflickity.flickity('resize');
});

[vd3d]

It works... thanks