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

Open in your IDE?
  1. {% block element_image_slider %}
  2.     {% if element.config.autoSlide.value and element.config.autoplayTimeout.value %}
  3.         {% set autoplay = element.config.autoSlide.value %}
  4.         {% set autoplaySpeed = element.config.autoplayTimeout.value %}
  5.     {% endif %}
  7.     {% if element.config.imageRatio.value == 'aspect-square' %}
  8.         {% set image_ratio =  'ratio_1x1' %}
  9.     {% elseif element.config.imageRatio.value == 'aspect-video' %}
  10.         {% set image_ratio =  'ratio_16x9' %}
  11.     {% else %}
  12.         {% set image_ratio =  'ratio_3x4' %}
  13.     {% endif %}
  14.     <div class="sw-native-image-slider-conatiner relative">
  15.         <div class="sw-native-image-slider slick-init" data-slick='{
  16.                      "mobileFirst": true,
  17.                     "arrows": true,
  18.                     {% if autoplay and autoplaySpeed %}
  19.                     "autoplay": true,
  20.                     "autoplaySpeed": {{ autoplaySpeed }},
  21.                     {% endif %}
  22.                     "prevArrow": "#prev-slide-{{ element.id }}",
  23.                     "nextArrow": "#next-slide-{{ element.id }}"
  24.                  }'>
  25.             {% for image in element.data.sliderItems %}
  27.                 {% set imageElement %}
  28.                     <div class="image-slider-item ratio {{ image_ratio }}">
  29.                         {% set attributes = {
  30.                             'class': 'w-full',
  31.                             'alt': (image.media.translated.alt ?: ''),
  32.                             'title': (image.media.translated.title ?: '')
  33.                         } %}
  35.                         {% sw_thumbnails 'cms-image-slider-thumbnails' with {
  36.                             media: image.media
  37.                         } %}
  38.                     </div>
  39.                 {% endset %}
  41.                 {% block element_image_slider_inner_item %}
  42.                     <div class="image-slider-item-container">
  43.                         {% if image.url %}
  44.                             <a href="{{ image.url }}"
  45.                                class="image-slider-link"
  46.                                {% if image.newTab %}target="_blank" rel="noopener"{% endif %}>
  47.                                 {{ imageElement }}
  48.                             </a>
  49.                         {% else %}
  50.                             {{ imageElement }}
  51.                         {% endif %}
  52.                     </div>
  53.                 {% endblock %}
  54.             {% endfor %}
  55.         </div>
  56.         <div class="sw-native-image-slider-controls-container boxed-layout absolute bottom-3 left-0 right-0 pr-5 md:sticky md:-translate-y-[150%] md:-bottom-10">
  57.             <div class="flex grid-gap-2 justify-end">
  58.                 <button id="prev-slide-{{ element.id }}"
  59.                         class="products-back flex p-1 transition duration-300 active:-translate-x-0.5 hover:-translate-x-0.5">
  60.                     {% sw_icon 'chevron-left' style{ 'pack': 'theme-icons', 'class': ' full-size w-8 h-8' } %}
  61.                 </button>
  62.                 <button id="next-slide-{{ element.id }}"
  63.                         class="products-next flex p-1 transition duration-300 active:translate-x-0.5 hover:translate-x-0.5">
  64.                     {% sw_icon 'chevron-right' style{ 'pack': 'theme-icons', 'class': ' full-size w-8 h-8' } %}
  65.                 </button>
  66.             </div>
  67.         </div>
  68.     </div>
  69. {% endblock %}