【问题标题】:Bootstrap 4 vertical carousel not working in Bootstrap 5 betaBootstrap 4 垂直轮播在 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 betaThe bootstrap 5 version

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

编辑:为了使其简单滚动(滑动),只需滑动下面的卡片/项目,删除slide 类。它只会有clickable 滑动卡

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

【问题讨论】:

标签: javascript html css twitter-bootstrap carousel


【解决方案1】:

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

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

Example link

【讨论】:

  • 那是我认为缺少基本的Bootstrap 5 类。不过谢谢
  • 虽然这可能是另一个问题,但仍然 - 你知道如何改变动画风格吗?从 3-4 过渡,它应该显示最少数量的图像/项目。只是简单的过渡
  • 哪种类型的动画?
  • 不是什么大问题,但在第二个类块中,transform 属性中100% 之后也缺少一个逗号。
猜你喜欢
  • 1970-01-01
  • 2021-08-14
  • 1970-01-01
  • 1970-01-01
  • 2020-05-11
  • 2019-04-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多