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..
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!
Try to change your js like :
$(document).ready(function(){
$("#carousel").on('slide.bs.carousel', function () {
document.getElementById("carousel").style.backgroundColor = "red";
});
});