{{-- shortcut --}}
@push('style-after-global')
<style>
.swiper-container-shortcut {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 2%;
    z-index: 1;
}
</style>
@endpush

<div style="margin: 1rem 0rem 1rem 0rem; padding: 0rem 1rem 0rem 1rem;">

    <section>

        @if ($shortcut)
            <div class="swiper-container-shortcut">
                <div class="swiper-wrapper">

                    @foreach($shortcut as $row)
                    <div class="swiper-slide">
                        <a href="
                            @if($row['slug'])
                            {{ url( 'article/' . $row['slug']) }}
                            @else
                            {{ $row['site_url'] }}
                            @endif
                            "
                            @if($row['site_url'])
                             target="_blank"
                            @endif
                            >
                            <div class="card-body text-center">
                                <img class="rounded" src="{{ url( $row['images_url']) }}" height="90"
                                width="150">
                            </div>
                        </a>
                    </div>
                    @endforeach

                </div>

                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <div class="swiper-scrollbar"></div>

            </div>
        @else
            <div lass="card-body">
                <div style="font-size:10px; color : #828D99; text-align:center;">
                    Tidak ditemukan
                </div>
            </div>
        @endif
    </section>

</div>
{{-- end shortcut --}}

@push('script-after-global')
<script>

var swiper = new Swiper('.swiper-container-shortcut', {
    slidesPerView: 1,
    spaceBetween: 30,
    freeMode: false,
    autoplay: {
        delay: 3000,
    },
    breakpoints: {
        1280: {
            slidesPerView: 5,
            spaceBetween: 15
        }
    }
});
</script>
@endpush