custom/plugins/UandiCustomCmsElements/src/Resources/views/storefront/element/cms-element-image-text-slider.html.twig line 1

Open in your IDE?
  1. {% block element_image_text_slider %}
  2.     <div class="cms-element-{{ element.type }}">
  3.         {% set slider = element.data %}
  4.         {% set baseSliderOptions = {
  5.             slider: {
  6.                 navPosition: 'bottom',
  7.                 speed: 500,
  8.                 nav: slider.navigation.dots ? true : false,
  9.                 controls: slider.navigation.arrows ? true : false,
  10.                 autoHeight: (slider.displayConfig.mode == "standard") ? true : false,
  11.                 autoplay: slider.autoplay.enabled,
  12.                 autoplayTimeout: slider.autoplay.time,
  13.                 autoplayButtonOutput: false
  14.             }
  15.         } %}
  16.         {% if slider.sliderItems %}
  17.         <div class="base-slider image-text-slider{% if slider.navigation.arrows == "outside" %} has-nav-outside{% endif %}{% if slider.navigation.dots == "outside" %} has-dots-outside{% endif %}"
  18.              data-base-slider="true"
  19.              data-base-slider-options='{{ baseSliderOptions|json_encode }}'
  20.         >
  21.             {% block element_image_text_slider_inner %}
  22.                 <div class="image-text-slider-container"
  23.                      data-base-slider-container="true">
  24.                     {% for item in slider.sliderItems %}
  25.                         {% block element_image_text_slider_inner_item %}
  26.                             <div class="image-text-slider-item-container">
  27.                                 <div class="image-text-slider-item-wrapper">
  28.                                     {% block element_image_text_slider_item_image %}
  29.                                         <div class="image-text-slider-item-image">
  30.                                             {% set imageElement %}
  31.                                                 <div class="{% if loop.first != true %} is-not-first{% endif %} is-{{ slider.displayConfig.mode }}"{% if slider.displayConfig.minHeight and  slider.displayConfig.mode == "cover" %} style="min-height: {{ slider.displayConfig.minHeight }}"{% endif %}>
  32.                                                     {% set attributes = {
  33.                                                         'class': 'img-fluid image-text-slider-image',
  34.                                                         'alt': (item.media.translated.alt ?: ''),
  35.                                                         'title': (item.media.translated.title ?: '')
  36.                                                     } %}
  38.                                                     {% if slider.displayConfig.mode == 'cover' or slider.displayConfig.mode == 'contain' %}
  39.                                                         {% set attributes = attributes|merge({ 'data-object-fit': slider.displayConfig.mode }) %}
  40.                                                     {% endif %}
  42.                                                     {% sw_thumbnails 'cms-image-text-slider-thumbnails' with {
  43.                                                         media: item.media
  44.                                                     } %}
  45.                                                 </div>
  46.                                             {% endset %}
  48.                                             {% if item.url %}
  49.                                                 <a href="{{ item.url }}"
  50.                                                    class="image-text-slider-link"
  51.                                                    {% if item.newTab %}target="_blank" rel="noopener"{% endif %}>
  52.                                                     {{ imageElement }}
  53.                                                 </a>
  54.                                             {% else %}
  55.                                                 {{ imageElement }}
  56.                                             {% endif %}
  57.                                         </div>
  58.                                     {% endblock %}
  59.                                     {% block element_image_text_slider_item_text %}
  60.                                         <div class="image-text-slider-item-text {% if item.textConfig.alignment %} has-vertical-alignment{% endif %}">
  61.                                             {% block element_text_alignment %}
  62.                                                 {% if item.textConfig.alignment %}
  63.                                                     <div class="cms-element-alignment{% if item.textConfig.alignment == "center" %} align-self-center{% elseif item.textConfig.alignment == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  64.                                                 {% endif %}
  65.                                                 {% block element_text_inner %}
  66.                                                     {{ item.textConfig.content|raw }}
  67.                                                 {% endblock %}
  68.                                                 {% if item.textConfig.alignment %}
  69.                                                     </div>
  70.                                                 {% endif %}
  71.                                             {% endblock %}
  72.                                         </div>
  73.                                     {% endblock %}
  74.                                 </div>
  75.                             </div>
  76.                         {% endblock %}
  77.                     {% endfor %}
  78.                 </div>
  80.                 {% block element_image_text_slider_controls %}
  81.                     {% if slider.navigation.arrows %}
  82.                         <div class="image-text-slider-controls-container">
  83.                             <div class="base-slider-controls"
  84.                                  data-base-slider-controls="true">
  85.                                 {% block element_image_text_slider_controls_items %}
  86.                                     {% block element_image_text_slider_controls_items_arrows %}
  87.                                         <button class="base-slider-controls-prev image-text-slider-controls-prev{% if slider.navigation.arrows == "outside" %} is-nav-prev-outside{% elseif slider.navigation.arrows == "inside" %} is-nav-prev-inside{% endif %}">
  88.                                             {% block element_image_text_slider_controls_items_prev_icon %}
  89.                                                 {% sw_icon 'arrow-head-left' %}
  90.                                             {% endblock %}
  91.                                         </button>
  92.                                         <button class="base-slider-controls-next image-text-slider-controls-next{% if slider.navigation.arrows == "outside" %} is-nav-next-outside{% elseif slider.navigation.arrows == "inside" %} is-nav-next-inside{% endif %}">
  93.                                             {% block element_image_text_slider_controls_items_next_icon %}
  94.                                                 {% sw_icon 'arrow-head-right' %}
  95.                                             {% endblock %}
  96.                                         </button>
  97.                                     {% endblock %}
  98.                                 {% endblock %}
  99.                             </div>
  100.                         </div>
  101.                     {% endif %}
  102.                 {% endblock %}
  103.             {% endblock %}
  104.         </div>
  105.         {% endif %}
  106.     </div>
  107. {% endblock %}