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>