I've spent hours on this and can't figure it out, so help would be appreciated.

I have a carousel that uses a foreach loop to create the items. One of the requirements, however, is that the div housing the carousel should have its color changed on the data used from the 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

The above is an example of one item, I want to change the background color of the div id: carousel using my $marketingItem->bg_color and replace the bg-danger.

I found this:

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

But that doesn't seem to work... Please help! Thanks..

CodePudding user response：

Try to change your js like :

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

CodePudding user response：

Managed to figure it out, redid the css and managed to get it inside the box. Had some bootstrap stuff that was applying a margin and what not. Thanks for the help!