templates/component/service_slider.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: service slider
  4.     items: [{
  5.         heading: [{
  6.             title {string}: Titre 
  7.             titleAnnex {string}: Titre annexe
  8.         }]
  9.         text {string}: Texte
  10.         image {image}: Image de l'activité
  11.             size: {
  12.                 width: "1440",
  13.                 height: "850"
  14.             }
  15.     }]
  17. #}
  19. {% set props = {
  20.   items: null
  21. }|merge(props|default({}))  %}
  23. <section data-component="service-slider" class="ServiceSlider-component">
  25.     <div
  26.         class="ServiceSlider-inner">
  28.         {# Images #}
  29.         <div class="ServiceSlider-images">
  30.             {% for item in props.items %}
  31.                 <div class="ServiceSlider-image" ref="images">
  32.                     {% include "component/image.html.twig" with {
  33.                         props: item.image
  34.                     } %}
  35.                     {# {% include "component/picture.html.twig" with {
  36.                         props: item.image|merge({
  37.                             srcWebp: (item.image.src) ? asset(item.image.src | imagine_filter('convert_img_to_webp')) : ''
  38.                         })
  39.                     } %} #}
  40.                 </div>
  41.             {% endfor %}
  42.         </div>
  44.         <div class="ServiceSlider-content">
  46.             <div class="l-container">
  48.                 <div
  49.                     class="l-row">
  51.                     {# Main #}
  52.                     <div class="l-column ServiceSlider-main">
  54.                         <div
  55.                             class="ServiceSlider-services">
  57.                             {# Services #}
  58.                             {% for item in props.items %}
  60.                                 {# Service #}
  61.                                 <div
  62.                                     class="ServiceSlider-service" ref="items">
  64.                                     {# Item heading #}
  65.                                     <div class="ServiceSlider-heading" ref="heading">
  66.                                         {% include "component/heading.html.twig" with {
  67.                                             props: item.heading
  68.                                         } %}
  69.                                     </div>
  71.                                     {# Item text #}
  72.                                     <div class="ServiceSlider-serviceText" ref="content">
  73.                                         {% include "component/wysiwyg.html.twig" with {
  74.                                         props: {
  75.                                             content: item.text
  76.                                         }
  77.                                     } %}
  78.                                     </div>
  80.                                 </div>
  82.                             {% endfor %}
  84.                         </div>
  86.                         {# Nav #}
  87.                         <div
  88.                             class="ServiceSlider-nav" ref="nav">
  90.                             {# Previous button #}
  91.                             <button ref="previousButton" class="ServiceSlider-navButton ServiceSlider-navPreviousButton NavPreviousButton">
  92.                                 {% include "component/svg.html.twig" with {
  93.                                     props: {
  94.                                         name: 'arrow-left'
  95.                                     }
  96.                                 } %}
  98.                                 {% include "component/svg.html.twig" with {
  99.                                     props: {
  100.                                         name: 'arrow-left'
  101.                                     }
  102.                                 } %}
  103.                             </button>
  105.                             {# Next button #}
  106.                             <button ref="nextButton" class="ServiceSlider-navButton ServiceSlider-navNextButton NavNextButton">
  107.                                 {% include "component/svg.html.twig" with {
  108.                                     props: {
  109.                                         name: 'arrow-right'
  110.                                     }
  111.                                 } %}
  112.                                 {% include "component/svg.html.twig" with {
  113.                                     props: {
  114.                                         name: 'arrow-right'
  115.                                     }
  116.                                 } %}
  117.                             </button>
  119.                         </div>
  121.                     </div>
  123.                 </div>
  125.             </div>
  127.         </div>
  129.     </div>
  131. </section>