Bootstrap 4 垂直轮播在 Bootstrap 5 beta 中不起作用

Posted 2023-03-07

【中文标题】Bootstrap 4 垂直轮播在 Bootstrap 5 beta 中不起作用

【英文标题】：Bootstrap 4 vertical carousel not working in Bootstrap 5 beta

【发布时间】：2021-05-07 11:59:01

【问题描述】：

我正在使用 Codeply 的示例构建垂直轮播，它与最新的 Bootstrap 4.6 完美配合。但是，当使用 Bootstrap 5 beta 尝试相同的垂直轮播时，轮播示例不起作用。

原codyply-vertical-carousel-example

Modified forked version 经测试可与Bootstrap 4.6 最新版本完美配合。

但是，相同的示例不适用于 Bootstrap 5 beta。 The bootstrap 5 version

任何帮助将不胜感激。 谢谢

编辑：为了使其简单滚动（滑动），只需滑动下面的卡片/项目，删除slide 类。它只会有clickable 滑动卡

奖励如果有人可以提供滑动动画，默认动画（slide 类）在 click 之后的动画之间显示 n 个项目

【问题讨论】：

Bootstrap 5 迁移指南： getbootstrap.com/docs/5.0/migration

@Manas 你有没有发现 Bootstrap 5 中的类从 Bootstrap 4 的任何变化

【参考方案1】：

我在 Carousel Bootstrap 5 beta 中发现了两种不同的：

在轮播控件中是data-bs-slide 而不是data-slide 当点击 next 箭头时，在轮播项目中添加的类是 carousel-item-start 而不是 carousel-item-left 当点击 previous 箭头在轮播项目中添加的类是 carousel-item-end 而不是 carousel-item-right

Example link

【讨论】：

那是我认为缺少基本的Bootstrap 5 类。不过谢谢

虽然这可能是另一个问题，但仍然 - 你知道如何改变动画风格吗？从 3-4 过渡，它应该显示最少数量的图像/项目。只是简单的过渡

哪种类型的动画？

不是什么大问题，但在第二个类块中，transform 属性中100% 之后也缺少一个逗号。