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

Open in your IDE?
  1. {# Slider element is developed by no.dots #}
  2. {% block nd_cms_element_slider_container %}
  3.     {% block nd_cms_element_slider_container_slider_settings %}
  4.         {% if element.config.active.value %}
  5.             {% set slick_settings_modal = {
  6.                 "slidesToShow": 1,
  7.                 "infinite": false,
  8.                 "arrows":true,
  9.                 "prevArrow": "#prev-slide-"~element.id,
  10.                 "nextArrow": "#next-slide-"~element.id,
  11.                 "responsive": [
  12.                     {
  13.                         "breakpoint": 400,
  14.                         "settings": "unslick"
  15.                     },
  16.                     {
  17.                         "breakpoint": 769,
  18.                         "settings": {
  19.                         "slidesToShow": 4,
  20.                     }
  21.                     },
  22.                     {
  23.                         "breakpoint": 1000,
  24.                         "settings": {
  25.                         "slidesToShow": 4,
  27.                     }
  28.                     },
  29.                     {
  30.                         "breakpoint": 500,
  31.                         "settings": "unslick"
  32.                     }
  33.                 ]
  34.             } %}
  35.         {% else %}
  36.             {% set slick_settings_modal = {
  37.                 "slidesToShow": 1,
  38.                 "mobileFirst": true,
  39.                 "infinite": false,
  40.                 "arrows":true,
  41.                 "prevArrow": "#prev-slide-"~element.id,
  42.                 "nextArrow": "#next-slide-"~element.id,
  43.                 "responsive": [
  44.                     {
  45.                         "breakpoint": 400,
  46.                         "settings": {
  47.                         "slidesToShow": 3,
  48.                         "arrows":true,
  49.                         "prevArrow": "#prev-slide-"~element.id,
  50.                         "nextArrow": "#next-slide-"~element.id,
  51.                     }
  52.                     },
  53.                     {
  54.                         "breakpoint": 769,
  55.                         "settings": {
  56.                         "slidesToShow": 5,
  57.                         "arrows":true,
  58.                         "prevArrow": "#prev-slide-"~element.id,
  59.                         "nextArrow": "#next-slide-"~element.id,
  60.                     }
  61.                     },
  62.                     {
  63.                         "breakpoint": 1000,
  64.                         "settings": {
  65.                         "slidesToShow": 5,
  66.                         "arrows":true,
  67.                         "prevArrow": "#prev-slide-"~element.id,
  68.                         "nextArrow": "#next-slide-"~element.id,
  70.                     }
  71.                     },
  72.                     {
  73.                         "breakpoint": 500,
  74.                         "settings": {
  75.                         "slidesToShow": 4,
  76.                         "arrows":true,
  77.                         "prevArrow": "#prev-slide-"~element.id,
  78.                         "nextArrow": "#next-slide-"~element.id,
  79.                     }
  80.                     }
  81.                 ]
  82.             } %}
  83.         {% endif %}
  87.         <section class="hero-carousel">
  88.         <div class="page-max-width">
  89.         <div class="wrapper relative">
  90.         <div class="w-full text-center mb-4 md:mb-10 h1">
  91.             <h1>{{ element.config.title.value }}</h1>
  92.         </div>
  94.         <div class="slick-thumbnail slick-init flex flex-row space-x-8 justify-center items-center"
  95.              data-slick='{{ slick_settings_modal|json_encode }}'>
  97.             {% for key, slide in element.data.get('slides') %}
  98.                 <div class="flex flex-col justify-center items-center">
  99.                     <div>
  100.                         {# CHECK if desktop image exists, use two square blocks if it exists. If not, use a single 16x9 image #}
  101.                         <div class="inset-0">
  102.                             {% if slide.mobile_image %}
  103.                                 <div class="w-28 h-28 lg:h-40 lg:w-40 mx-auto">
  104.                                     {% sw_thumbnails 'cms-image-thumbnails' with {
  105.                                         media: slide.mobile_image,
  106.                                         load: true,
  107.                                         attributes: {
  108.                                             'class': 'rounded-full w-full h-full object-cover object-center',
  109.                                             'alt': (slide.mobile_image.translated.alt ?: ''),
  110.                                             'title': (slide.mobile_image.translated.title ?: '')
  111.                                         }
  112.                                     } %}
  113.                                 </div>
  114.                             {% endif %}
  115.                         </div>
  116.                         <div class="container text-black z-10 text-center">
  117.                             {% if slide.text %}
  118.                                 <div class="hidden md:block font-bold my-4 break-all">
  119.                                     {{ slide.text }}
  120.                                 </div>
  121.                             {% endif %}
  122.                             {% if slide.mobileText %}
  123.                                 <div class="md:hidden font-bold my-4 break-all">
  124.                                     {{ slide.mobileText }}
  125.                                 </div>
  126.                             {% endif %}
  127.                         </div>
  128.                     </div>
  129.                 </div>
  130.             {% endfor %}
  131.         </div>
  132.     {% endblock %}
  133.     {% block nd_cms_element_slider_container_buttons %}
  134.         <div class="flex grid-gap-2 justify-end mr-2 lg:mr-6 xl:mr-6 2xl:mr-10">
  135.             {% block  nd_cms_element_slider_container_buttons_prev %}
  136.                 <button id="prev-slide-{{ element.id }}"
  137.                         class="products-back flex p-1 text-white transition duration-300 active:-translate-x-0.5 hover:-translate-x-0.5">
  138.                     {% sw_icon 'arrow-left' style{ 'pack': 'default', 'class': 'full-size w-8' } %}
  139.                 </button>
  140.             {% endblock %}
  141.             {% block  nd_cms_element_slider_container_buttons_next %}
  142.                 <button id="next-slide-{{ element.id }}"
  143.                         class="products-next flex p-1 text-white transition duration-300 active:translate-x-0.5 hover:translate-x-0.5">
  144.                     {% sw_icon 'arrow-right' style{ 'pack': 'default', 'class': ' full-size w-8' } %}
  145.                 </button>
  146.             {% endblock %}
  147.         </div>
  148.     {% endblock %}
  149.     </div>
  150.     </div>
  151.     </section>
  152. {% endblock %}