src/Trinity/SliderBundle/Resources/views/default/slider.html.twig line 1

Open in your IDE?
  1. {% if file_exists('../templates/override/slider/slider.html.twig') %}
  2.   {% include 'override/slider/slider.html.twig' %}
  3. {% else %}
  5. <div {% if Slider.height is not null and Slider.height > 0 %}style="height: {{ Slider.height }};"{% endif %} id="slider_{{Slider.id}}" class="slider-container {{Slider.classes}}">
  7.   <div class="swiper-content">
  8.     <div class="swiper-container slider_bundle slider_bundle_{{Slider.id}}"
  9.         data-speed="{% if Slider.scrollspeed is not empty %}{{ Slider.scrollspeed }}{% else %}1000{% endif %}"
  10.         data-fade="{% if Slider.fade %}true{% else %}false{% endif %}"
  11.         data-autoplay="{% if Slider.autoplay %}true{% else %}false{% endif %}"
  12.         data-autoplaydelay="{% if Slider.autospeed > 0 %}{{ Slider.autospeed }}{% else %}8000{% endif %}"
  13.         data-centered="{% if Slider.centermode %}true{% else %}false{% endif %}"
  14.         data-loop="{% if Slider.infinite %}true{% else %}false{% endif %}"
  15.         data-id="{{Slider.id}}"
  16.     >
  17.       <div class="swiper-wrapper">
  18.         {% for Entry in entries %}
  19.             {% if Entry.slideUrl is not null %}
  20.               <a href="{{ Entry.slideUrl }}" class="swiper-slide {{ Entry.classes }}" {% if Slider.height is not null and Slider.height > 0 %}style="height: {{ Slider.height }};"{% endif %}>
  21.             {% else %}
  22.               <div class="swiper-slide {{ Entry.classes }}" {% if Slider.height is not null and Slider.height > 0 %}style="height: {{ Slider.height }};"{% endif %}>
  23.             {% endif %}
  25.               {% if Entry.mobilemedia %}
  26.                 <div class="image d-md-none">
  27.                   <div class="lcp">
  28.                     {% if Entry.mobilemedia is not empty %}
  29.                       {% if Entry.mobilemedia.hasBlurred %}
  30.                         <picture>
  31.                           {% if Entry.mobilemedia.hasWebp() %}
  32.                             <source srcset="/{{Entry.mobilemedia.getBlurredWebpPath('large')}}" type="image/webp">
  33.                           {% endif %}
  34.                           <source srcset="/{{Entry.mobilemedia.getBlurredWebPath('large')}}" type="{{Entry.mobilemedia.mime}}">
  35.                           <img class="lq" alt="{{Entry.mobilemedia.description_alt}}" src="/{{Entry.mobilemedia.getBlurredWebPath('large')}}" type="{{Entry.mobilemedia.mime}}" loading="eager" width="{{Entry.mobilemedia.width}}" height="{{Entry.mobilemedia.height}}">
  36.                         </picture>
  37.                       {% endif %}
  38.                       <picture>
  39.                         {% if Entry.mobilemedia.hasWebp() %}
  40.                           <source srcset="/{{Entry.mobilemedia.getWebpPath('large')}}" type="image/webp">
  41.                         {% endif %}
  42.                         <source srcset="/{{Entry.mobilemedia.getWebPath('large')}}" type="{{ Entry.mobilemedia.mime }}">
  43.                       <img class="hq" alt="{{Entry.mobilemedia.description_alt}}" src="/{{Entry.mobilemedia.getWebPath('large')}}" type="{{Entry.mobilemedia.mime}}" loading="eager" width="{{Entry.mobilemedia.width}}" height="{{Entry.mobilemedia.height}}" onload="this.style.opacity=1{% if Entry.mobilemedia.hasBlurred %};this.closest('.lcp').getElementsByClassName('lq')[0].style.opacity=0;{% endif %}" style="opacity: 0;">
  44.                       </picture>
  45.                     {% endif %}
  46.                   </div>
  47.                 </div>
  48.               {% endif %}
  50.               <div class="image {% if Entry.mobilemedia %}d-none d-md-block{% endif %}">
  51.                 <div class="lcp">
  52.                   {% if Entry.Media is not empty %}
  53.                     {% if Entry.Media.hasBlurred %}
  54.                       <picture>
  55.                         {% if Entry.Media.hasWebp() %}
  56.                           <source srcset="/{{Entry.Media.getBlurredWebpPath('full')}}" type="image/webp">
  57.                         {% endif %}
  58.                         <source srcset="/{{Entry.Media.getBlurredWebPath('full')}}" type="{{Entry.Media.mime}}">
  59.                         <img class="lq" alt="{{Entry.Media.description_alt}}" src="/{{Entry.Media.getBlurredWebPath('full')}}" type="{{Entry.Media.mime}}" loading="eager" width="{{Entry.Media.width}}" height="{{Entry.Media.height}}">
  60.                       </picture>
  61.                     {% endif %}
  62.                     <picture>
  63.                       {% if Entry.Media.hasWebp() %}
  64.                         <source srcset="/{{Entry.Media.getWebpPath('full')}}" type="image/webp">
  65.                       {% endif %}
  66.                       <source srcset="/{{Entry.Media.getWebPath('full')}}" type="{{ Entry.Media.mime }}">
  67.                     <img class="hq" alt="{{Entry.Media.description_alt}}" src="/{{Entry.Media.getWebPath('full')}}" type="{{Entry.Media.mime}}" loading="eager" width="{{Entry.Media.width}}" height="{{Entry.Media.height}}" onload="this.style.opacity=1{% if Entry.Media.hasBlurred %};this.closest('.lcp').getElementsByClassName('lq')[0].style.opacity=0;{% endif %}" style="opacity: 0;">
  68.                     </picture>
  69.                   {% endif %}
  70.                 </div>
  71.               </div>
  73.               {% if Entry.getLabel is not empty %}
  74.                 <div class="container">
  75.                   <div class="vtable">
  76.                     <div class="vcell">
  77.                       <div class="titles">
  78.                         <div class="row align-items-end">
  79.                           <div class="col-12 {% if Entry.slideUrl is null %}col-md-6{% endif %}">
  80.                             {% if Slider.showTitle %}
  81.                               <h2 class="slide-title">{{Entry.getLabel|raw}}</h2>
  82.                             {% endif %}
  83.                             {% if Slider.showContent %}
  84.                               {{Entry.getContent|raw}}
  85.                             {% endif %}
  86.                           </div>
  87.                           {% if Entry.slideUrl is null %}
  88.                             <div class="col-12 col-md-6">
  89.                               {% if Entry.buttons and Entry.buttons is not empty %}
  90.                                 <div class="slide-buttons text-md-end">
  91.                                   {% for button in Entry.buttons %}
  92.                                     <a href="{{button.url}}" title="{{button.label}}" {% if button.target is defined and button.target != "null" %} target="{{button.target}}" {% endif %} class="btn {{button.class}}">{{button.label}} <i class="fa fa-arrow-right"></i></a>
  93.                                   {% endfor %}
  94.                                 </div>
  95.                               {% endif %}
  96.                             </div>
  97.                           {% endif %}
  98.                         </div>
  99.                       </div>
  100.                     </div>
  101.                   </div>
  102.                 </div>
  103.               {% endif %}
  104.             {% if Entry.slideUrl is not null %}
  105.               </a>
  106.             {% else %}
  107.               </div>
  108.             {% endif %}
  109.         {% endfor %}
  110.       </div>
  112.       {% if Slider.dots %}
  113.       <div class="swiper-pagination swiper-pagination_{{Slider.id}}"></div>
  114.       {% endif %}
  116.       {% if Slider.arrows %}
  117.       <div class="swiper-button-prev swiper-button-prev_{{Slider.id}}"></div>
  118.       <div class="swiper-button-next swiper-button-next_{{Slider.id}}"></div>
  119.       {% endif %}
  120.     </div>
  121.   </div>
  122. </div>
  123. {% endif %}