src/DcSiteBundle/Resources/views/Modules/slider2.html.twig line 1

Open in your IDE?
  1. {#
  2.     Accept vars on import:
  3.     - 'bs5': true or false
  4.     - 'sliderInterval': number or 'false'
  5.     - 'sliderRide': 'carousel' or 'false'
  6. #}
  7. {% set isBS5 = bs5|default(false) %}
  8. <section id="mainSlider" class="carousel slide slider2"
  9.     data-{{ isBS5 ? 'bs-' : '' }}interval="{{ sliderInterval | default(5000) }}"
  10.     data-{{ isBS5 ? 'bs-' : '' }}ride="{{ sliderRide | default('carousel') }}">
  11.     <div class="carousel-inner">
  12.         {% for i, slide in slides %}
  13.         <div class="carousel-item{{ i == 1 ? ' active' : '' }}">
  14.             <a class="d-block" href="{{ slide.id == 'manual' or slide.url is not defined ? '#' : slide.url }}"{{ slide.id == 'manual' ? ' data-toggle="modal" data-target="' ~ slide.url ~ '"' : '' }}>
  15.                 {% if i == 1 %}
  16.                 {# Render main slide right away #}
  17.                 <picture alt="{{ slide.title }}">
  18.                     {% if slide.img_webp_mob %}
  19.                     <source srcset="{{ slide.img_webp_mob }}" type="image/webp"{{ slide.img_webp ? ' media="(max-width: 767px)"' : '' }}>
  20.                     {% endif %}
  21.                     {% if slide.img_mob %}
  22.                     <source srcset="{{ slide.img_mob }}" media="(max-width: 767px)">
  23.                     {% endif %}
  24.                     {% if slide.img_webp %}
  25.                     <source srcset="{{ slide.img_webp }}" type="image/webp"{{ slide.img_webp_mob ? ' media="(min-width: 768px)"' : '' }}>
  26.                     {% endif %}
  27.                     <source srcset="{{ slide.img }}"{{ slide.img_mob ? ' media="(min-width: 768px)"' : '' }}>
  28.                     <img src="{{ slide.img }}" alt="{{ slide.title }}" fetchpriority="high" style="max-width: 100%;">
  29.                 </picture>
  30.                 {% else %}
  31.                 {# See `initLazyPictures()` for lazy loaded pictures #}
  32.                 <picture class="lazy"
  33.                     data-webp="{{ slide.img_webp_mob }}" data-fallback="{{ slide.img_mob }}"
  34.                     data-desktop-webp="{{ slide.img_webp }}" data-desktop-fallback="{{ slide.img }}"
  35.                     alt="{{ slide.title }}"></picture>
  36.                 {% endif %}
  37.             </a>
  39.             {% if (slide.stateTitle is defined and slide.stateTitle) or (slide.stateSubTitle is defined and slide.stateSubTitle) %}
  40.             <div class="slider2__info">
  41.                 {% if slide.stateTitle %}
  42.                 <div class="slider2__title">
  43.                     <span>{{ slide.title }}</span>
  44.                 </div>
  45.                 {% endif %}
  47.                 {% if slide.stateSubTitle %}
  48.                 <div class="slider2__sub-title">
  49.                     <span>{{ slide.subTitle }}</span>
  50.                 </div>
  51.                 {% endif %}
  53.                 {% if slide.car %}
  54.                 <div class="slider2__car-info">
  55.                     <p>{{ 'base.from'|trans({},'dc_toyota_od') }} {{ slide.car | price }} грн</p>
  56.                 </div>
  57.                 {% endif %}
  59.                 {% if dealer.id == 29 %}<div class="slider2__btn__wrapper">{% endif %}
  61.                 {% if slide.btn %}
  62.                 <div class="slider2__btn__wrapper">
  63.                     <a class="btn slider2__btn-f bg-btn btn-w100" href="{{ slide.id == 'manual' ? '#' : slide.url }}">{{ slide.btn }}</a>
  64.                     {% if slide.btnSecTitle and slide.btnSecUrl %}
  65.                     <a class="btn slider2__btn-s slider2__btn-n" href="{{ slide.btnSecUrl }}">{{ slide.btnSecTitle }}</a>
  66.                     {% endif %}
  67.                 </div>
  68.                 {% endif %}
  70.                 {% if dealer.id == 29 %}</div>{% endif %}
  71.             </div>
  72.             {% endif %}
  73.         </div>
  74.         {% endfor %}
  75.     </div>
  76.     {% if slides is iterable and slides|length > 1 %}
  77.     <button class="carousel-control-prev" {{ isBS5 ? 'data-bs-target' : 'href' }}="#mainSlider" role="button" data-{{ isBS5 ? 'bs-' : '' }}slide="prev">
  78.         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  79.         <span class="{{ isBS5 ? 'visually-hidden' : 'sr-only' }}">Попередній слайд</span>
  80.     </button>
  81.     <button class="carousel-control-next" {{ isBS5 ? 'data-bs-target' : 'href' }}="#mainSlider" role="button" data-{{ isBS5 ? 'bs-' : '' }}slide="next">
  82.         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  83.         <span class="{{ isBS5 ? 'visually-hidden' : 'sr-only' }}">Наступний слайд</span>
  84.     </button>
  85.     {% endif %}
  86. </section>