<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<% require javascript("https://code.jquery.com/jquery-3.1.0.min.js") %>
<style>
#slider-frame_sponser{
    background-color: #f5f4f0;
}

#slider-frame_sponser .swiper-container {
    position: relative;
    z-index: unset;
    margin: 0 8%;
}


#slider-frame_sponser .sponser-logo{
    height:100px; 
    background-repeat: no-repeat; 
    background-position: center;
}
@media(max-width: 1024px){
    #slider-frame_sponser .sponser-logo{
        background-size:contain;
    }
}
@media(min-width: 768px){
    .sponser-slider{
        justify-content: center;
    }
}
.slide-sponser{
    text-align: center;
}
</style>

<%-- <div class="sponsors-global">
    <div class="container">
        <ul>
            <% cache 'FooterSponsors' %>
                <% loop $FooterSponsors %>
                    <li>
                        <% if Website %>
                            <a href="$Website.ATT" target="_blank" rel="noopener">
                        <% end_if %>

                        <img src="{$Logo.Fit('300', '300').URL}" alt="{$Title.ATT}" />

                        <% if Website %>
                            </a>
                        <% end_if %>
                    </li>
                <% end_loop %>
            <% end_cache %>
        </ul>
    </div>
</div> --%>


<div id="slider-frame_sponser">
    <div class="swiper swiper-container" id="swiper-sponser">
    <div class="swiper-wrapper sponser-slider"> 
            <% loop $FooterSponsors %>
                <div class="swiper-slide slide-sponser">                                                     
                            
                                <% if $ClickAbleBanner %>
                            <a href="<% if $ClickAbleBannerLink %>{$ClickAbleBannerLink}<% else %>{$ClickAbleBannerInternalLink.Link}<% end_if %>" <% if $ClickAbleBannerLink %>target="_blank"<% end_if %>>
                            <% end_if %>
                            <div class="sub-slide">
                                <% if Website %>
                                    <a href="$Website.ATT" target="_blank" rel="noopener">
                                <% end_if %>
                            
                                 <img src="{$Logo.ScaleWidth('160').URL}" alt="{$Title.ATT}" /> 

                                <% if Website %>
                                    </a>
                                <% end_if %>
                            </div>
                            <% if $ClickAbleBanner %>
                            </a>
                            <% end_if %>
                        </div>
                    <% end_loop %>                              
        </div>
        <!-- If we need navigation buttons -->
  <!--  <div class="swiper-button-prev swiper-button-hidden swiperBtn-left-2 slide-btn"></div>
<div class="swiper-button-next swiper-button-hidden swiperBtn-right-2 slide-btn"></div>-->
    </div>
</div>


<script type="module">
    import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
    var swiper_sponsor = new Swiper('#swiper-sponser', {
    spaceBetween: 3,
    autoHeight: true,
    loop: true,
    freeMode: {
    enabled: true,
    sticky: true,
  },
       breakpointsBase: 'container',
     // Responsive breakpoints
    breakpoints: {
      // when window width is >= 320px
      320: {
        slidesPerView: 4,
        spaceBetween: 2
      },
      // when window width is >= 480px
      600: {
        slidesPerView: 5,
        spaceBetween: 2
      },
      // when window width is >= 640px
      1020: {
        slidesPerView: 6,
        spaceBetween: 2
      },
      1600: {
        slidesPerView: 7,
        spaceBetween: 2
      }
    },
     navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
         },
    autoplay: {
    delay: 3000,
  },
  });
  
    </script> 

