<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<style>
.advertisement{
    text-align: center;
}
</style>
<%-- <% loop $getAdvertising('AdvertisingBanner') %>
    <% if $Image %>
        <div class="advertisement-horizontal hidden-xs hidden-sm">
            <div class="container">
                <a class="advertisement" href="$Link" target="_blank" rel="noopener">
                    <img src="$Image.Fill(1140, 150).URL" alt="$Title">
                </a>
            </div>
        </div>
    <% end_if %>
    <% if $MobileImage %>
        <div class="advertisement-horizontal hidden-md hidden-lg">
            <div class="container">
                <a class="advertisement" href="$Link" target="_blank" rel="noopener">
                    <img src="$MobileImage.URL" alt="$Title">
                </a>
            </div>
        </div>
    <% end_if %>
<% end_loop %> --%>
<% if $getAdvertising('AdvertisingBanner').Count > 1 %>
<div id="slider-frame_ads">
    <div class="swiper swiper-container" id="swiper-ads">
    <div class="swiper-wrapper"> 
        <% loop $getAdvertising('AdvertisingBanner') %>
            <div class="swiper-slide slide-ads">                                                     
                                    
            <% if $Image %>
                <div class="advertisement-horizontal hidden-xs hidden-sm">
                    <div class="container">
                        <a class="advertisement" href="$Link" target="_blank" rel="noopener">
                            <img src="$Image.Fill(1140, 150).URL" alt="$Title">
                        </a>
                    </div>
                </div>
            <% end_if %>
            <% if $MobileImage %>
                <div class="advertisement-horizontal hidden-md hidden-lg">
                    <div class="container">
                        <a class="advertisement" href="$Link" target="_blank" rel="noopener">
                            <img src="$MobileImage.URL" alt="$Title">
                        </a>
                    </div>
                </div>
            <% end_if %>
        </div>
        <% end_loop %>                             
        </div>
        <!-- If we need navigation buttons -->
 <!--   <div class="swiper-button-prev swiperBtn-left-2 slide-btn" style="top:50% !important;"></div>
<div class="swiper-button-next swiperBtn-right-2 slide-btn" style="top:50% !important;"></div>-->
    </div>
</div>

<script type="module">
    import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
    const swiper = new Swiper('#swiper-ads', {
    autoplay: {
    delay: 3000,
  },
  });
  
    </script> 
    <% else %>
    <% loop $getAdvertising('AdvertisingBanner') %>
    <% if $Image %>
        <div class="advertisement-horizontal hidden-xs hidden-sm">
            <div class="container">
                <a class="advertisement" href="$Link" target="_blank" rel="noopener">
                    <img src="$Image.Fill(1140, 150).URL" alt="$Title">
                </a>
            </div>
        </div>
    <% end_if %>
    <% if $MobileImage %>
        <div class="advertisement-horizontal hidden-md hidden-lg">
            <div class="container">
                <a class="advertisement" href="$Link" target="_blank" rel="noopener">
                    <img src="$MobileImage.URL" alt="$Title">
                </a>
            </div>
        </div>
    <% end_if %>
<% end_loop %>
    <% end_if %>

