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 和选项都是相同的，它的行为应该与上面的一样，但事实并非如此。

你可以在这里看到页面

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

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%;
}