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

Open in your IDE?
  1. <section class="main-slider" id="mainSlider" style="min-height: 480px">
  2.     <div class="main-slider__preloader" v-if="!isLoaded">
  3.         <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="160px" height="20px" viewBox="0 0 128 16" xml:space="preserve"><rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF" /><path fill="#949494" fill-opacity="0.42" d="M6.4,4.8A3.2,3.2,0,1,1,3.2,8,3.2,3.2,0,0,1,6.4,4.8Zm12.8,0A3.2,3.2,0,1,1,16,8,3.2,3.2,0,0,1,19.2,4.8ZM32,4.8A3.2,3.2,0,1,1,28.8,8,3.2,3.2,0,0,1,32,4.8Zm12.8,0A3.2,3.2,0,1,1,41.6,8,3.2,3.2,0,0,1,44.8,4.8Zm12.8,0A3.2,3.2,0,1,1,54.4,8,3.2,3.2,0,0,1,57.6,4.8Zm12.8,0A3.2,3.2,0,1,1,67.2,8,3.2,3.2,0,0,1,70.4,4.8Zm12.8,0A3.2,3.2,0,1,1,80,8,3.2,3.2,0,0,1,83.2,4.8ZM96,4.8A3.2,3.2,0,1,1,92.8,8,3.2,3.2,0,0,1,96,4.8Zm12.8,0A3.2,3.2,0,1,1,105.6,8,3.2,3.2,0,0,1,108.8,4.8Zm12.8,0A3.2,3.2,0,1,1,118.4,8,3.2,3.2,0,0,1,121.6,4.8Z"/><g><path fill="#000000" fill-opacity="1" d="M-42.7,3.84A4.16,4.16,0,0,1-38.54,8a4.16,4.16,0,0,1-4.16,4.16A4.16,4.16,0,0,1-46.86,8,4.16,4.16,0,0,1-42.7,3.84Zm12.8-.64A4.8,4.8,0,0,1-25.1,8a4.8,4.8,0,0,1-4.8,4.8A4.8,4.8,0,0,1-34.7,8,4.8,4.8,0,0,1-29.9,3.2Zm12.8-.64A5.44,5.44,0,0,1-11.66,8a5.44,5.44,0,0,1-5.44,5.44A5.44,5.44,0,0,1-22.54,8,5.44,5.44,0,0,1-17.1,2.56Z"/><animateTransform attributeName="transform" type="translate" values="23 0;36 0;49 0;62 0;74.5 0;87.5 0;100 0;113 0;125.5 0;138.5 0;151.5 0;164.5 0;178 0" calcMode="discrete" dur="1170ms" repeatCount="indefinite"/></g></svg>
  4.     </div>
  5.     <div class="main-slider__wrapper" v-else :style="{display: isLoaded ? 'block' : 'none'}">
  6.         <div class="main-slider__container" ref="slides-container" :data-w="containerStyle.mobHeight" v-if="countSlides > 1">
  7.             <transition-group tag="div" name="slider-container" :style="{'width': containerStyle.width+'px','transform': 'translate3d(' + containerStyle.translate + ', 0, 0)'}">
  8.                 <div class="main-slider__item" v-for="(slide, i) in slides" :class="{'main-slider__item--active': i === 1, 'main-slider__item--sibling': i === 0 || i === 2, 'main-slider__item--none': slide.btn}" :ref="i === 1 ? 'main-slide' : ''"  :key="'slide-' + slide.id" :data-t="slide.id">
  9.                     <div v-if="slide.btn" class="main-slider__overlay"></div>
  10.                     <a href="#" v-if="slide.id == 'manual'" @click.prevent.stop="showModal(slide.url)">
  11.                         <picture :alt="slide.title">
  12.                             <source :srcset="slide.img_webp" type="image/webp">
  13.                             <source :srcset="slide.img">
  14.                             <img :src="slide.img" :alt="slide.title" :loading="i = 1 ? 'eager' : 'lazy'" :decoding="i = 1 ? null : 'async'" data-sizes="100vw" height="400px" :style="{'width': imgWidth + 'px'}" />
  15.                         </picture>
  16.                     </a>
  17.                     <a class="img-height-mobile" :href="slide.url" v-else>
  18.                         <picture :alt="slide.title">
  19.                             <source :srcset="slide.img_webp" type="image/webp" v-if="slide.img_webp">
  20.                             <source :srcset="slide.img">
  21.                             <img class="img-height-mobile" :src="slide.img" :alt="slide.title" :loading="i = 1 ? 'eager' : 'lazy'" :decoding="i = 1 ? null : 'async'" data-sizes="100vw" height="400px" :width="imgWidth" :style="{'width': imgWidth + 'px'}">
  22.                         </picture>
  23.                     </a>
  24.                     <div class="main-slider__info" style="min-height: 80px" v-if="slide.stateTitle || slide.stateSubTitle">
  25.                         <div class="main-slider__title" v-if="slide.stateTitle">
  26.                             <span>{% verbatim %}{{ slide.title }}{% endverbatim %}</span>
  27.                         </div>
  28.                         <div class="main-slider__sub-title" v-if="slide.stateSubTitle">
  29.                             <span>{% verbatim %}{{ slide.subTitle }}{% endverbatim %}</span>
  30.                         </div>
  31.                         <div class="main-slider__car-info">
  32.                             <p v-if="slide.car">{{ 'base.from'|trans({},'dc_toyota_od') }} {% verbatim %}{{ slide.car | price }}{% endverbatim %} грн</p>
  33.                         </div>
  34.                         {% if dealer.id == 29 %}
  35.                         <div class="main-slider__btn__wrapper">
  36.                             <a class="btn main-slider__btn-f bg-btn btn-w100" @click.prevent.stop="showModal(slide.url)" v-if="slide.id == 'manual'" href="#" >{% verbatim %}{{ slide.btn }}{% endverbatim %}</a>
  37.                             <a class="btn main-slider__btn-f bg-btn btn-w100" v-else :href="slide.url">{% verbatim %}{{ slide.btn }}{% endverbatim %}</a>
  38.                             <a v-if="slide.btnSecTitle && slide.btnSecUrl" class="btn main-slider__btn-s main-slider__btn-n" :href="slide.btnSecUrl">{% verbatim %}{{ slide.btnSecTitle }}{% endverbatim %}</a>
  39.                         </div>
  40.                         {% else %}
  41.                             <a class="btn main-slider__btn-f bg-btn btn-w100" @click.prevent.stop="showModal(slide.url)" v-if="slide.id == 'manual'" href="#" >{% verbatim %}{{ slide.btn }}{% endverbatim %}</a>
  42.                             <a class="btn main-slider__btn-f bg-btn btn-w100" v-else :href="slide.url">{% verbatim %}{{ slide.btn }}{% endverbatim %}</a>
  43.                             <a v-if="slide.btnSecTitle && slide.btnSecUrl" class="btn main-slider__btn-s main-slider__btn-n" :href="slide.btnSecUrl">{% verbatim %}{{ slide.btnSecTitle }}{% endverbatim %}</a>
  44.                         {% endif %}
  45.                     </div>
  46.                 </div>
  47.             </transition-group>
  48.         </div>
  49.         <div v-else :style="{'width': containerStyle.width+'px','transform': 'translate3d(' + parseInt(containerStyle.offset) + 'px, 0, 0)'}">
  50.             <div class="main-slider__item main-slider__item--active">
  51.                 <div v-if="slides[0].btn" class="main-slider__overlay"></div>
  52.                 <img class="img-height-mobile" :src="slides[0].img+'?{{ VERSION }}'" :alt="slides[0].title" data-sizes="100vw" :height="imgHeight" :style="{'width': imgWidth + 'px'}">
  53.                 <div class="main-slider__info" v-if="slides[0].stateTitle || slides[0].stateSubTitle">
  54.                     <div class="main-slider__title" v-if="slides[0].stateTitle">
  55.                         <span>{% verbatim %}{{ slides[0].title }}{% endverbatim %}</span>
  56.                     </div>
  57.                     <div class="main-slider__sub-title" v-if="slides[0].stateSubTitle">
  58.                         <span>{% verbatim %}{{ slides[0].subTitle }}{% endverbatim %}</span>
  59.                     </div>
  60.                     <div class="main-slider__car-info">
  61.                         <p v-if="slides[0].car">{{ 'base.from'|trans({},'dc_toyota_od') }} {% verbatim %}{{slides[0].car | price }}{% endverbatim %} грн</p>
  62.                     </div>
  63.                     <a class="btn main-slider__btn-f bg-btn btn-w100" :href="slides[0].url">{% verbatim %}{{ slides[0].btn }}{% endverbatim %}</a>
  64.                     <a v-if="slides[0].btnSecTitle && slides[0].btnSecUrl" class="btn main-slider__btn-s main-slider__btn-n" :href="slides[0].btnSecUrl">{% verbatim %}{{ slides[0].btnSecTitle }}{% endverbatim %}</a>
  65.                 </div>
  66.             </div>
  67.         </div>
  68. {#        <div class="main-slider__nav" v-if="isNav" :style="{'top': (imgWidth < 1440 ? '75px' : '50%')}">#}
  69.         <div class="main-slider__nav" v-if="isNav">
  70.             <button type="button" aria-label="prev" class="main-slider__prev" @click="move('prev')">
  71.                 {#<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"><g><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/></g></svg>#}
  72.                 <svg width="32" height="34" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
  73.                     <g filter="url(#filter0_d)">
  74.                         <path d="M21.9784 2.91091C22.1769 2.71246 22.4249 2.61324 22.6978 2.61324C22.9707 2.61324 23.2187 2.71246 23.4172 2.91091C23.8141 3.30781 23.8141 3.95277 23.4172 4.34967L10.766 17.0008L23.4172 29.652C23.8141 30.0489 23.8141 30.6939 23.4172 31.0908C23.0203 31.4877 22.3753 31.4877 21.9784 31.0908L8.60786 17.7202C8.21096 17.3233 8.21096 16.6783 8.60786 16.2814L21.9784 2.91091Z" fill="white"/>
  75.                     </g>
  76.                     <defs>
  77.                         <filter id="filter0_d" x="-2" y="-1" width="36" height="36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  78.                             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  79.                             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
  80.                             <feOffset/>
  81.                             <feGaussianBlur stdDeviation="1"/>
  82.                             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.85 0"/>
  83.                             <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
  84.                             <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
  85.                         </filter>
  86.                     </defs>
  87.                 </svg>
  88.             </button>
  89.             <button type="button" aria-label="next" class="main-slider__next" @click="move('next')">
  90.                 {#<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.175 477.175" xml:space="preserve"><g><path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/></g></svg>#}
  91.                 <svg width="32" height="34" viewBox="0 0 32 34" fill="none" xmlns="http://www.w3.org/2000/svg">
  92.                     <g filter="url(#filter0_d)">
  93.                         <path d="M21.9784 2.91091C22.1769 2.71246 22.4249 2.61324 22.6978 2.61324C22.9707 2.61324 23.2187 2.71246 23.4172 2.91091C23.8141 3.30781 23.8141 3.95277 23.4172 4.34967L10.766 17.0008L23.4172 29.652C23.8141 30.0489 23.8141 30.6939 23.4172 31.0908C23.0203 31.4877 22.3753 31.4877 21.9784 31.0908L8.60786 17.7202C8.21096 17.3233 8.21096 16.6783 8.60786 16.2814L21.9784 2.91091Z" fill="white"/>
  94.                     </g>
  95.                     <defs>
  96.                         <filter id="filter0_d" x="-2" y="-1" width="36" height="36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
  97.                             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
  98.                             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
  99.                             <feOffset/>
  100.                             <feGaussianBlur stdDeviation="1"/>
  101.                             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.85 0"/>
  102.                             <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
  103.                             <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
  104.                         </filter>
  105.                     </defs>
  106.                 </svg>
  107.             </button>
  108.         </div>
  109.         {#<div class="main-slider__indicators">#}
  110.             {#<ul>#}
  111.                 {#<li v-for=""></li>#}
  112.             {#</ul>#}
  113.         {#</div>#}
  114.     </div>
  115. </section>