@php
    $offers = [1, 2, 3];
@endphp

<!--section  -->
<section class="slw-sec" id="sec1">
    <div class="section-title">
        <h2>Offers and Promotions</h2>
        <div class="section-subtitle">Avail best deals</div>
        <span class="section-separator"></span>
    </div>
    <div class="container">
        <div class="listing-slider-wrap fl-wrap">
            <div class="promotions-slider fl-wrap">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        @forelse ($offers as $key => $offer)
                            <!--  swiper-slide  -->
                            <div class="swiper-slide">
                                <div class="listing-slider-item fl-wrap">
                                    <!-- listing-item  -->
                                    <div class="listing_carditem">
                                        <article class="geodir-category-listing fl-wrap">
                                            <div class="geodir-category-img">
                                                <a href="#" class="geodir-category-img-wrap fl-wrap">
                                                    <img src="{{ asset('assets/') }}/images/offers/{{ $key }}.webp" alt="">
                                                </a>
                                                <div class="geodir-category-opt">
                                                    <div class="geodir-category-opt_title">
                                                        <h4><a href="listing-single.html"></a></h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                </div>
                            </div>

                        @empty
                        @endforelse
                    </div>
                </div>
                <div class="listing-carousel-button listing-carousel-button-next2"><i class="fas fa-caret-right"></i>
                </div>
                <div class="listing-carousel-button listing-carousel-button-prev2"><i class="fas fa-caret-left"></i>
                </div>
            </div>
        </div>
    </div>
</section>
<!--section end-->