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

Open in your IDE?
  1. {% sw_extends'@Storefront/storefront/element/cms-element-thumbnail-slider.html.twig' %}
  2. {% set isSlider = element.config.active.value %}
  3. {% block nd_cms_element_slider_container_slider_settings %}
  6.     {% if isSlider %}
  7.         {% set slick_settings_modal = {
  8.             "mobileFirst": true,
  9.             "arrows": true,
  10.             "prevArrow": "#prev-slide-"~element.id,
  11.             "nextArrow": "#next-slide-"~element.id,
  12.             "responsive": [
  13.                 {
  14.                     "breakpoint": 1,
  15.                     "settings": "unslick"
  16.                 },
  17.                 {
  18.                     "breakpoint": 1023,
  19.                     "settings": {
  20.                     "dots": false,
  21.                     "arrows": true,
  22.                     "infinite": false,
  23.                     "slidesToShow": 4,
  24.                 }
  25.                 }
  26.             ]
  27.         } %}
  28.     {% endif %}
  30.     <section class="hero-carousel mb-5 md:mb-10">
  31.         <div class="page-max-width">
  32.             <div class="wrapper relative">
  33.                 <div class="w-full text-center mb-4 md:mb-10">
  34.                     <h1>{{ element.config.title.value }}</h1>
  35.                 </div>
  37.                 <div class="{% if isSlider %} slick-thumbnail slick-init slick-after-lg slick-swipe-mobile slick-padding-boxed-layout {% else %} flex flex-col md:flex-row space-y-6 md:space-y-0 space-x-0 md:space-x-6 justify-center {% endif %}"
  38.                      data-slick='{{ slick_settings_modal|json_encode }}'>
  39.                     {% for key, slide in element.data.get('slides') %}
  40.                         <div class="w-auto h-auto">
  41.                             <div class="{% if isSlider %}relative w-56 h-56 mx-auto md:mx-auto lg:mx-auto xl:mx-4 xl:w-auto xl:h-auto {% else %} w-full h-72 mx-auto xl:w-72 xl:h-72 2xl:w-full 2xl:h-auto {% endif %}">
  42.                                 {% if slide.url %}
  43.                                 <a href="{{ slide.url }}">
  44.                                     {% endif %}
  45.                                 {# CHECK if desktop image exists, use two square blocks if it exists. If not, use a single 16x9 image #}
  46.                                 {% if slide.mobile_image %}
  47.                                     {% sw_thumbnails 'cms-image-thumbnails' with {
  48.                                         media: slide.mobile_image,
  49.                                         load: true,
  50.                                         attributes: {
  51.                                             'class': 'w-full h-full object-cover',
  52.                                             'alt': (slide.mobile_image.translated.alt ?: ''),
  53.                                             'title': (slide.mobile_image.translated.title ?: '')
  54.                                         }
  55.                                     } %}
  56.                                 {% endif %}
  58.                                 <div class="container relative text-black z-10 text-center">
  59.                                         {% if slide.text %}
  60.                                             <div class="hidden cursor-pointer w-full max-w-[80%] py-2 px-6 uppercase md:block btn-outline absolute bottom-6 left-1/2 transform -translate-x-1/2 flex items-center font-bold break-all">
  61.                                                 {{ slide.text }}
  62.                                             </div>
  63.                                         {% endif %}
  64.                                         {% if slide.mobileText %}
  65.                                             <div class="md:hidden cursor-pointer block w-full max-w-[80%] py-2 px-6 uppercase btn-outline absolute bottom-2 left-1/2 transform -translate-x-1/2 flex justify-center items-center font-bold break-all">
  66.                                                 {{ slide.mobileText }}
  67.                                             </div>
  68.                                         {% endif %}
  69.                                 </div>
  70.                                     {% if slide.url %}
  71.                                 </a>
  72.                                 {% endif %}
  73.                             </div>
  74.                         </div>
  75.                     {% endfor %}
  76.                 </div>
  77.             </div>
  78.         </div>
  79.     </section>
  80. {% endblock %}
  82. {% block nd_cms_element_slider_container_buttons %}
  83.     {% if isSlider %}
  84.         <div class="h-full hidden md:block">
  85.             {% block  nd_cms_element_slider_container_buttons_prev %}
  86.                 <button id="prev-slide-{{ element.id }}"
  87.                         class="products-back shadow-lg bg-white p-2 2xl:p-3 absolute -left-1 lg:-left-2 top-1/2 transform -translate-y-1/2 flex flex-col items-center text-white">
  88.                     {% sw_icon 'icon-leading-left' style{ 'pack': 'theme-icons', 'class': 'stroke w-6 2xl:w-7 text-gray-900' } %}
  89.                 </button>
  90.             {% endblock %}
  91.             {% block  nd_cms_element_slider_container_buttons_next %}
  92.                 <button id="next-slide-{{ element.id }}"
  93.                         class="products-back shadow-lg bg-white p-2 2xl:p-3 absolute -right-1 lg:-right-2 top-1/2 transform -translate-y-1/2 flex flex-col items-center text-white">
  94.                     {% sw_icon 'icon-leading-right' style{ 'pack': 'theme-icons', 'class': 'stroke w-6 2xl:w-7 text-gray-900' } %}
  95.                 </button>
  96.             {% endblock %}
  97.         </div>
  98.     {% endif %}
  99. {% endblock %}