轻拂滑块 – 滑动未对齐

Question

我正在努力找出为什么幻灯片内的Flickity滑块不对齐?

滑动块不在位置的Gif动画

从技术上讲，滑块是工作的。所以这一定是我没有实现的选项或者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

希望看到其他选项，但我想我可能已经排序了…

.carousel {
overflow: hidden;
&::after {
content: "flickity";
display: none;
}
.flickity-cell.is-selected {
position: absolute;
inset: 0;
}
}