templates/component/image_slider.html.twig line 1

Open in your IDE?
  1. {#
  2.     component: image slider
  4.     items: [{
  5.         title {string}: Titre d'une slide
  6.         image {image}: Image d'une slide
  7.       size: {
  8.         width: "1200",
  9.         height: "725"
  10.       }
  11.     }]
  12. #}
  15. {% set props = {
  16.   items: []
  17. }|merge(props|default({}))  %}
  19. <section
  20.     data-component="image-slider" class="ImageSlider-component">
  22.     {# Heading #}
  23.     {% include "component/heading.html.twig" with {
  24.     props: props.heading
  25.   } only %}
  27.     <div class="l-container">
  29.         <div class="l-row">
  31.             <div class="l-column ImageSlider-main">
  33.                 <div class="ImageSlider-ratioHelper">
  35.                     <div>
  37.                         {# Images #}
  38.                         <div class="ImageSlider-imagesWrapper" ref="container">
  40.                             <div class="ImageSlider-images">
  42.                                 {% for item in props.items %}
  44.                                     <div class="ImageSlider-image" ref="items">
  46.                                         {% include "component/image.html.twig" with {
  47.                                             props: item.image
  48.                                         } %}
  49.                                         {# {% include "component/picture.html.twig" with {
  50.                                             props: item.image|merge({
  51.                                                 srcWebp: (item.image.src) ? asset(item.image.src | imagine_filter('convert_img_to_webp')) : ''
  52.                                             })
  53.                                         } %} #}
  55.                                     </div>
  57.                                 {% endfor %}
  59.                             </div>
  61.                         </div>
  63.                     </div>
  65.                 </div>
  67.                 {# Nav #}
  68.                 <div
  69.                     class="ImageSlider-nav">
  71.                     {# Numbers #}
  72.                     <div class="ImageSlider-navNumbers">
  74.                         <span class="ImageSlider-currentIndex" ref="index">1</span>
  76.                         <span>/</span>
  78.                         <span class="ImageSlider-totalIndex">{{ props.items | length }}</span>
  80.                     </div>
  82.                     {# Arrows #}
  83.                     <div
  84.                         class="ImageSlider-navButtons">
  86.                         {# Previous button #}
  87.                         <button ref="previousButton" class="ImageSlider-navButton ImageSlider-navPreviousButton">
  89.                             {% include "component/svg.html.twig" with {
  90.                 props: {
  91.                   name: 'arrow-left'
  92.                 }
  93.               } %}
  95.                         </button>
  97.                         {# Next button #}
  98.                         <button ref="nextButton" class="ImageSlider-navButton ImageSlider-navNextButton">
  100.                             {% include "component/svg.html.twig" with {
  101.                 props: {
  102.                   name: 'arrow-right'
  103.                 }
  104.               } %}
  106.                         </button>
  108.                     </div>
  110.                     {% set names = [] %}
  112.                     {% for item in props.items %}
  113.                         {% set names = names|merge([item.title]) %}
  114.                     {% endfor %}
  116.                     {# Current image name #}
  117.                     <p class="ImageSlider-currentImageName" data-names="{{ names|json_encode() }}" ref="name">{{ props.items[0].title }}</p>
  119.                 </div>
  121.             </div>
  123.         </div>
  125.     </div>
  127. </section>