【问题标题】:bootstrap 5 carousel doesn't work in Blazorbootstrap 5 轮播在 Blazor 中不起作用
【发布时间】:2021-08-14 04:55:15
【问题描述】:

请打开以下链接以查看在 jquery 和 bootstrap 4.3.1 的帮助下运行的轮播(代码行 48,50)。而不是这些,我想使用 Bootstrap 5 js 文件来获得相同的轮播。但它没有与代码行(8),52-54(bootstrap 5 CSS和JS会在轮播中滑动的图像之间产生间隙,这不是必需的。首先,在blazor中使用Bootstrap 5 CSS和JS,图像不会自行滑动或单击 Next/prev 按钮时不会滑动,因此需要单击 carousel-indicators 才能看到滑动功能)

Bootstrap 5 至少在 JS 编辑器中滑动,但即使在此处滑动时也会出现白色间隙: [JS小提琴][https://jsfiddle.net/gxyuqoer/]

Bootstrap 5 无法在 Blazor 编辑器中运行: Blazor Fiddle

请让我了解 bootstrap 4.3.1 和 5 版本的轮播有什么区别,以及为什么在第 5 版中无法让轮播滑动

【问题讨论】:

  • 似乎对我有用,如果鼠标悬停在图像上,动画当然会停止。不过,您可能错过了启动它的初始调用。
  • 不知道为什么要引用三个引导 js 库!您引用了 4.x 引导 CSS,但添加了 4.x、5.x 捆绑包和 5.x 非捆绑包!
  • 嗨@BrianParker,当您注释第 7 行并取消注释第 8 行时会出现问题,该行使用的是引导程序 5.0 而不是 4.3 版本的 CSS。另外,我认为当鼠标悬停(在 4.3 及更高版本中)时轮播停止动画是很自然的
  • 嗨@Quango,我只是在尝试bootstrap 5中的哪个JS支持与bootstrap 4.3版本相同的功能。但这对我不起作用:(
  • 我在使用 Bootstrap 5 Carousel 时也遇到了很多问题。我最终使用了 BlazorStrap 轮播,它非常适合我想要的:blazorstrap.io/carousels

标签: javascript jquery blazor carousel bootstrap-5


【解决方案1】:

您可以使用 HAVIT Blazor (https://havit.blazor.eu) 捆绑包中的 HxCarousel 组件。

免费,建立在 Bootstrap 5 之上。

如果你不愿意使用这个包,你可以克隆源代码(https://github.com/havit/Havit.Blazor),它是开源的。

【讨论】:

    猜你喜欢
    • 2021-05-07
    • 1970-01-01
    • 1970-01-01
    • 2021-08-25
    • 2022-12-11
    • 2020-05-11
    • 2020-05-10
    • 2015-01-16
    • 1970-01-01
    相关资源
    最近更新 更多