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

Posted 2023-03-14

【中文标题】更改轮播项目更改的背景颜色

【英文标题】：Change background color on carousel item change

【发布时间】：2021-11-22 09:39:31

【问题描述】：

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

我有一个使用 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)"
                              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";
 );

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

【参考方案1】：

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

【参考方案2】：

尝试改变你的js：

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

【讨论】：

这也是我的想法，唯一的问题是 $marketingItem->bg_color 不可访问，因为这个 div 是在 foreach 循环之外创建的.. :/

我编辑了我的帖子。