templates/blocks/custom_slider.html.twig line 1

Open in your IDE?
  1. {#
  2.     {
  3.         "key": "custom_slider",
  4.         "category": "Framework",
  5.         "label": "Carousel voor producten",
  6.         "description": "",
  7.         "allowMove": true,
  8.         "blocks": [
  9.             {
  10.                 "key": "block-0",
  11.                 "size": 12,
  12.                 "buttons": true,
  13.                 "multiple": true,
  14.                 "minimum": 1,
  15.                 "required": "media",
  16.                 "fields": [
  17.                     {
  18.                         "key": "title",
  19.                         "type": "textarea",
  20.                         "label": "Tekst links"
  21.                     },
  22.                     {
  23.                         "key": "content",
  24.                         "type": "textarea",
  25.                         "label": "Tekst rechts"
  26.                     }
  27.                 ]
  28.             }
  29.         ]
  30.     }
  31. #}
  33. <section id="{{wrapper.cssId is defined ? wrapper.cssId : ''}}" class="products-slider {{wrapper.cssClass is defined ? wrapper.cssClass : ''}}" style="{% if wrapper.bgColor %}background-color: {{wrapper.bgColor}};{% endif %}">
  34.   <div class="container">
  35.     <div class="row">
  36.       <div class="col-12">
  37.         {% if wrapper.label or wrapper.intro is not empty %}
  38.           <div class="introblock d-none d-lg-block">
  39.             {% if wrapper.label is not empty %}
  40.               <div class="introtitle">
  41.                 {{wrapper.label|raw}}
  42.               </div>
  43.             {% endif %}
  44.             {% if wrapper.intro is not empty %}
  45.               <div class="introtext">
  46.                 {{wrapper.intro|raw}}
  47.               </div>
  48.             {% endif %}
  49.           </div>
  50.         {% endif %}
  51.       </div>
  52.     </div>
  54.     <div class="slides">
  55.       {% for b in wrapper.blocks %}
  56.       <div class="slide">
  57.         <div class="row align-items-center">
  58.             <div class="col-12 col-lg-4 content-left text-center text-lg-right">
  59.               {{b.config.title|raw}}
  61.               {% if b.config.buttons is defined %}
  62.                 <div class="btns d-none d-lg-block">
  63.                   {% for button in b.config.buttons %}
  64.                     <a href="{{button.url}}" {% if button.target is defined and button.target != "null" %} target="{{button.target}}" {% endif %} class="btn btn-blank {{button.class}}">
  65.                       {{button.label}}
  66.                       <i class="fa fa-angle-right"></i>
  67.                     </a>
  68.                   {% endfor %}
  69.                 </div>
  70.               {% endif %}
  71.             </div>
  72.             <div class="col-12 col-lg-4 content-center  text-center text-lg-left">
  73.               {% if b.media is not empty %}
  74.                 <img src="/{{b.media.getWebPath}}" alt="">
  75.               {% endif %}
  77.               {% if b.config.buttons is defined %}
  78.                 <div class="btns d-lg-none">
  79.                   {% for button in b.config.buttons %}
  80.                     <a href="{{button.url}}" {% if button.target is defined and button.target != "null" %} target="{{button.target}}" {% endif %} class="btn btn-blank {{button.class}}">
  81.                       {{button.label}}
  82.                       <i class="fa fa-angle-right"></i>
  83.                     </a>
  84.                   {% endfor %}
  85.                 </div>
  86.               {% endif %}
  87.             </div>
  88.             <div class="col-12 col-lg-4 content-right {# d-none d-lg-block #}">
  89.               {{b.config.content|raw}}
  90.             </div>
  91.           </div>
  92.       </div>
  93.       {% endfor %}
  94.     </div>
  96.   </div>
  97. </section>