更改轮播项目更改的背景颜色

Question

我已经花了几个小时来解决这个问题，但无法弄清楚，因此我们将不胜感激。

我有一个使用 foreach 循环创建项目的轮播。然而，其中一项要求是，容纳轮播的 div 应该根据 foreach 使用的数据更改颜色。

<div class="p-0 col-lg-6 text-light d-none d-sm-block w-50 h-100">
  <div id="carousel" class="carousel d-flex flex-column justify-content-center align-items-center w-100 h-100 rounded bg-danger" data-bs-ride="carousel">
    <div class="carousel-inner justify-content-center" role="listbox">
      @foreach($marketingItems as $marketingItem)
        <div class="carousel-item text-center h-100 {{ $loop->first ? 'active' : '' }}">
          @if($marketingItem->image != null)
            <div class="item">
              <img src="{{get_marketing_image($marketingItem->image)}}"
                             alt="{{$marketingItem->image}}" class="img-thumbnail pb-5">
            </div>
          @endif

上面是一个项目的例子，我想用我的$marketingItem->bg_color来改变divid: carousel的背景颜色并替换bg-danger。

我发现了这个：

 $("#carousel").on('slide.bs.carousel', function () {
   document.getElementById("carousel").style.backgroundColor = "red";
 });

但这似乎不起作用...请帮助！谢谢..

Answer 1

设法弄明白，重新编写 css 并设法将其放入盒子中。有一些引导程序应用了边距，什么没有。感谢您的帮助！

Answer 2

尝试改变你的js：

$(document).ready(function(){
    $("#carousel").on('slide.bs.carousel', function () {
        document.getElementById("carousel").style.backgroundColor = "red";
    });
});