<section class="bg-body-tertiary">
    <div class="container" style="padding-top:24px;">
        <div class="row">

    
            <!-- Linked images (controlled slider) -->
            <div class="col-12">
                <div class="position-relative ms-md-n4">
                    <div class="ratio" style="--cz-aspect-ratio: calc(9 / 17 * 100%)"></div>
                    <div class="swiper position-absolute top-0 start-0 w-100 user-select-none"
                        id="heroImages"
                        data-swiper='{
                                "spaceBetween": 24,
                                "loop": true,
                                "speed": 400,
                                "controlSlider": "#heroImages",
                                "pagination": {
                                    "el": "#sliderBullets",
                                    "clickable": true
                                },
                                "autoplay": {
                                    "delay": 5500,
                                    "disableOnInteraction": false
                                }
                            }'>
                        <div class="swiper-wrapper">
                            @foreach ($items as $item)
                                   <div class="swiper-slide">
                                        <img src="{{ env('WMS_ASSET_URL') . '/' .$item->filename }}" class="w-100"
                                            alt="Image">
                                    </div>
                            @endforeach
                         
                    
                         
                        </div>
                    </div>

                     <!-- Slider bullets (pagination) -->
                <div
                    class="d-flex justify-content-center justify-content-md-start pb-4 pb-xl-5 mt-n1 mt-md-auto mb-md-3 mb-lg-4">
                    <div class="swiper-pagination position-static w-auto pb-1" id="sliderBullets"></div>
                </div>
                </div>
            </div>
        </div>
    </div>
</section>
