Can't get rid of the default gap between slides

[rougeversbleu]

Hi, In order to replace the good but old jQuery Cycle 2 plugin, I decided to give Flickity a try. Flickity looks very promising. But I stumbled very quickly trying to build a simple slideshow with no gap between slides. I already tried different fixes in order to get rid of the default gap. Unfortunately, they don't work for me. In my opinion, there should be a native way to set/unset this gap without any tricky hack. Any idea? Thanks a lot

You can check the white gaps between the slides. Test case: https://codepen.io/rougeversbleu/pen/VwbLLrN

[marcomezzavilla]

Try replacing the .flickity-wieport class like this:

.flickity-viewport { 
  width: 100%;
}

In some cases it may be useful to use the resize method (link) after the page content is loaded.

[rougeversbleu]

Thanks @marcomezzavilla for the tip. Unfortunately changing the flickity-viewport width doesn't help.

After further tests I figured out that the gap is appearing only when the page is loading and only if the page has no scrollbar. As soon as the viewport changes (on resize), the gap disappear.

Flickity inside a page with no scrollbar : https://codepen.io/rougeversbleu/pen/eYWNxre Flickity inside a page with scrollbar : https://codepen.io/rougeversbleu/pen/ExmjMEB

It looks like Flickity expects a scrollbar by default? Might be a bug @desandro?

[marcomezzavilla]

You can help Flickity resize the gallery correctly by using the resize method when the DOM (or the content inside the carousel, in some cases) has been loaded:

document.addEventListener("DOMContentLoaded", (event) => {
  let flickity = new Flickity('.carousel');  
  flickity.resize();
});

This problem has been addressed before (see #466 and #668 for example). If you can't solve it any other way, the advice to use overflow-y: scroll remains valid.

[rougeversbleu]

Thanks a lot @marcomezzavilla! I prefer not using the overflow-y: scroll which is disproportionate in my opinion. I'll keep the first method to solve my problem.