He pasado horas en esto y no puedo resolverlo, por lo que agradecería la ayuda.
Tengo un carrusel que usa un bucle foreach para crear los elementos. Sin embargo, uno de los requisitos es que el div que alberga el carrusel debe cambiar de color en los datos utilizados del 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 Lo anterior es un ejemplo de un elemento, quiero cambiar el color de fondo del id: carousel usando mi $marketingItem->bg_color y reemplazar bg-danger .
Encontré esto:
$("#carousel").on('slide.bs.carousel', function () { document.getElementById("carousel").style.backgroundColor = "red"; });Pero eso no parece funcionar... ¡Ayuda, por favor! Gracias..
Me las arreglé para resolverlo, rehice el css y logré meterlo dentro de la caja. Tenía algunas cosas de arranque que estaban aplicando un margen y otras cosas. ¡Gracias por la ayuda!
Intenta cambiar tu js como:
$(document).ready(function(){ $("#carousel").on('slide.bs.carousel', function () { document.getElementById("carousel").style.backgroundColor = "red"; }); });