html - Flickity 轮播卡片相互重叠
问题描述
我在同一页面上有两个轮播。阅读多个问题(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 和选项都是相同的,它的行为应该与上面的一样,但事实并非如此。
你可以在这里看到页面
我希望第二个表现得像第一个。但我无法让它发挥作用。
解决方案
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%;
}
推荐阅读
- php - 如何确保 QR 码仅对特定用户有效 24 小时
- c# - 如何读取文件并将每个单词存储在使用二维数组的行数组中的数组中c#
- laravel - 发送请求时出现问题。请再试一次 laravel
- fish - 有选择地将命令历史记录存储到单独的文件中
- c# - .NET Core 3.1 调试器未在代码中显示发生问题的确切行
- c++ - const 指针专业化使用 MSVC 生成未解析的符号,并且适用于 GCC/Clang
- c++ - 实现复制构造函数、析构函数以及如何为队列重载赋值运算符
- xamarin.android - 使用 Sqlite 捕获、保存和检索图像/图片
- laravel - Bootstrap 4 切换按钮(汉堡包)在新的 Laravel 7 项目中不起作用
- c++ - R:xgboost源代码中的梯度步骤在哪里?