如何在Bootstrap5的carousel轮播组件中实现滑动切换效果？

问题排查与解决方法 #

你提供的Bootstrap轮播基础代码结构符合规范，没有语法错误，没有滑动过渡效果大概率是以下几类原因导致，可按顺序排查：

• 优先排查自定义样式冲突：你引入了自定义的styles.css文件，很可能里面的规则覆盖了Bootstrap自带的轮播过渡样式。常见冲突规则包括给.carousel-item、.carousel类设置了transition: none、强制修改display属性、覆盖了transform相关规则。可以先临时注释掉<link rel="stylesheet" href="css/styles.css">这行代码，刷新页面测试滑动效果是否恢复，如果恢复正常，只需修改自定义CSS中的冲突规则即可。
• 检查资源加载与控制台报错：打开浏览器开发者工具的控制台面板，查看有没有Bootstrap CSS/JS资源加载失败的提示，或者JS运行报错，资源加载异常会导致轮播组件的过渡逻辑无法正常触发。
• 检查id唯一性：确认页面内只有一个id为testimonial-carousel的元素，id重复会导致轮播控制逻辑异常，无法触发过渡动画。
• 手动初始化轮播组件：如果以上排查都没有问题，可以在页面底部插入JS代码手动初始化轮播，明确配置过渡相关参数：

const carouselEl = document.getElementById('testimonial-carousel')
new bootstrap.Carousel(carouselEl, {
  ride: false,
  touch: true
})

内容的提问来源于stack exchange，提问作者Rowan