@props([
  'id' , 'value'
])




<div id="{{ $id }}" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">

        @foreach ($value as $key => $image)
            <div class="carousel-item {{ $key === 0 ? 'active' : '' }}" data-bs-interval="10000">
                <x-pop-image :value="$image->img" name="d-block w-100" />

            </div>
        @endforeach

    </div>

    <button class="carousel-control-prev" type="button" data-bs-target="#{{ $id }}" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>

    <button class="carousel-control-next" type="button" data-bs-target="#{{ $id }}" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>

</div>