Flickity Slider – Slides out of alignment

Question

I'm struggling to work out why the slides within a Flickity Slider are out of alignment?

Gif of slider being out of position

Technically the slider is working. So this must be either a option I haven't implemented or CSS.

Javascript

var Flickity = require("flickity");
require("flickity-fade");

var mediaChoiceCarousel = new Flickity("#media-choice-carousel", {
  autoPlay: true,
  autoPlay: 4500,
  adaptiveHeight: false,
  pageDots: false,
  prevNextButtons: false,
  cellAlign: "left",
  wrapAround: true,
  contain: true
});

HTML

<div id="media-choice-carousel" class="carousel carousel-ratiowide">
        <div class="slide">
          <picture class="ratio-wide">
            <img src="###" alt="###" />
          </picture>
        </div>
        <div class="slide">
          <div class="video-wrapper">
            <iframe></iframe>
          </div>
        </div>
</div>

Answer 1

Would love to see other options, but I think I may of sorted it…

.carousel {
  overflow: hidden;

  &::after {
    content: "flickity";
    display: none;
  }

  .flickity-cell.is-selected {
    position: absolute;
    inset: 0;
  }
}