@if (get_sliders())
    <div id="carouselExampleControls" class="carousel slide mb-5" data-bs-ride="carousel">
        <div class="carousel-inner">
            @foreach (get_sliders() as $key => $item)
                <div class="carousel-item  @if ($key == 0) active @endif">
                    <a href="{{ $item->link }}" class="d-block w-100 bg-white d-flex align-items-center justify-content-center">
                        <img src="{{ Common::get_slider_image($item->id, $item->image) }}" class="d-block"
                            alt="Hooptica"  style="max-height: 800px;width:100%;object-fit:cover;">
                            <div class="carousel-caption d-none d-md-block">
                                <h5>{{ $item->title }}</h5>
                                <p>{{ $item->description }}</p>
                            </div>
                    </a>
                </div>
            @endforeach
        </div>
        @if (get_sliders()->count() > 1)
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
                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="#carouselExampleControls"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        @endif
    </div>
@endif