html - Flickity 轮播卡片相互重叠

Question

我在同一页面上有两个轮播。阅读多个问题 ( https://github.com/metafizzy/flickity/issues/206 ) 和文档 ( https://flickity.metafizzy.co/options.html#carousel-cell2 ) 我能够使其中一个轮播完美运行。

完美的看起来像这样:https://imgur.com/a/dUPCz1z它的 JQuery 是:

$('.main-carousel').flickity({
  // options
  contain: true,
  initialIndex: 0,
    imagesLoaded: true,
    groupCells:2,
  resize: false,
});

现在，我尝试使用相同的选项制作下一个。但它一直在重叠。 ( https://imgur.com/a/APWvglG )

$('.school_section1').flickity({
  // options
  contain: true,
  initialIndex: 0,
  imagesLoaded: true,
  groupCells:2,
  resize: false,
});

因为几乎所有的 css 和选项都是相同的，所以它的行为应该与上面的一样，但事实并非如此。

可以看到页面here

我希望第二个表现得像第一个。但我无法让它发挥作用。

Answer 1

I just saw the page. 

Try making these changes to the existing class. It should work.

.school_section1 .single-area {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.2);
    align-items: center;
    justify-content: space-around;
    width: 17%;
    height: 100%;
}