使用 flickity 和 bootstrap 4 进行水平卡片滚动（响应式）

Posted 2023-03-06

【中文标题】使用 flickity 和 bootstrap 4 进行水平卡片滚动（响应式）

【英文标题】：Using flickity with bootstrap 4 for horizontal cards scrolling (responsive)

【发布时间】：2018-09-21 05:01:10

【问题描述】：

谁能提供一个这样的例子，或者至少是引导程序 4 中轻弹的成功例子？我正在尝试在一种旋转木马中制作一张水平卡片列表。我想一次滚动浏览它们三个。使用flickity 似乎很有趣，但我在引导程序 4 中这样做会遇到各种问题。卡片的大小不会相同，或者会消失。我尝试在有和没有行/列类（网格）的情况下使用它，只是遇到了不同的问题。 这与我想要实现的有点相似，除了滚动条： https://www.codeply.com/go/PF4APyGj7F

【问题讨论】：

在给定的示例中，您不需要出现滚动条吗？

@Pramod 我希望有一种包含卡片的响应式轮播，所以是的，没有滚动条。在台式机上一次显示 3 张卡片，在手机上一次显示一张。

【参考方案1】：

在深入了解我的问题后，我在 Flickity 的 github 上进行了询问，有人能够为我提供一个有效的 BS4 示例。所以从那里我知道可以将这个插件与 BS4 一起使用。我只需要找出我做错了什么。 https://github.com/metafizzy/flickity/issues/742

【参考方案2】：

您可以隐藏滚动条。这是隐藏滚动条的代码：-

::-webkit-scrollbar  
    display: none; 

【讨论】：

显然firefox不太支持这个...link

查看此链接***.com/questions/20997183/…