<div class="promo-ribbon-elements" role="navigation">
    <div id="{{ $id }}" class="hidden swiper-container promo-ribbon-swiper-container" data-elements="{{ $num_elements }}" data-slides="{{ $settings['slides_per_view'] }}">
        <!-- Additional required wrapper -->

        <div class="swiper-wrapper">
            <!-- Slides -->
            @set($ribbon_cnt=1)
            @foreach($ribbon_promo_buttons as $el_id=>$el_data)
                <div class="ribbon-item swiper-slide" data-swiper-autoplay="{{ $el_data['delay'] }}">
                    <a href="{{ $el_data['ribbon_promo_url'] }}" class="ribbon-link"
                       title="{{ $el_data['ribbon_promo_title'] }}">
                        @if(!empty($el_data['icon']) && $use_icons)
                            <img src="{{ $el_data['icon'] }}" width="50" height="50" class="ribbon-icon" alt="{{ $el_data['ribbon_promo_title'] }}" title="{{ $el_data['ribbon_promo_title'] }}">
                        @endif
                        <span class="ribbon-item-title">{{ $el_data['ribbon_promo_title'] }}</span>
                    </a>
                </div>
                @set($ribbon_cnt)
                @if($ribbon_cnt > 9)
                    @set($ribbon_cnt=1)
                @endif
            @endforeach
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination hidden"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev swiper-button-black @if($num_elements > $settings['slides_per_view'] ) toggle-pagination @endif"></div>
        <div class="swiper-button-next swiper-button-black @if($num_elements > $settings['slides_per_view'] ) toggle-pagination @endif"></div>

        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar hidden"></div>
    </div>
</div>