{if $slider.images}
   <div class="home-slider-outer" >
      <div{if $slider.images|count > 1} id="home-slider"{/if} class="home-slider owl-carousel slider-theme">
         {foreach $slider.images as $image}
            <a href="{$image.link}"
               class="slider-item slider-item-{$image.custom_data['color']|default:'black'}{if !$image.description} slider-item-without-desc{/if}"
               data-tracking-view='{get_gtm_data type='ecommerce' method='PromotionImpression' encode=true data=['slider' => $slider, 'position' => $image@iteration]}'
                    {if $dbcfg.analytics.google_tag_manager.gtm_dl_version == '2'}
                       data-tracking-click='{get_gtm_data encode=true type='ecommerce' method='PromotionClick' data=['slider' => $slider, 'slide' => $image, 'position' => $image@iteration]}'
                    {else}
                       data-tracking-click="{['event'=>'bannerClick']|json_encode}"
                    {/if}
            >
               <picture>
                  <source srcset="{get_photo photo=$image.photo size='slider' version="mobile"}" media="(max-width: 543px)">
                  <source srcset="{get_photo photo=$image.photo size='slider' version="tablet"}" media="(max-width: 1259px)">
                  <img src="{get_photo photo=$image.photo size='slider' version="desktop"}" alt="" class="img-responsive" width="1624" height="600" {if $image@iteration > 1} loading="lazy"{/if}>
               </picture>
               <div class="text{if $image.custom_data['hideText']} default-hidden{/if}">
                  {$parts="|"|explode:$image.description}
                  <p class="lead">{$parts[0]}</p>
                  <p class="h1">{$parts[1]}</p>
                  <p class="subtitle">{$parts[2]}</p>

                  {$view_link = "{t}Prohlédnout{/t}"}
                  <span class="btn {if $image.custom_data['color'] == "white"}btn-white{else}btn-primary{/if}">{$parts[3]|default:$view_link}</span>
               </div>
            </a>
         {/foreach}
      </div>

      <div class="owl-nav-custom">
         <div class="owl-dots-custom"></div>
      </div>
   </div>
{/if}
