eSales Media Git repositories
Browse code

Remote Progress

Benjamin Roth authored on16/11/2022 13:21:22
Showing1 changed files
templates/aldegott2022/mod_team_list.html.twig
History View file @d0535da
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,85 @@
1 
+{% extends '@Contao/block_searchable' %}
2 
+{% import "@ContaoCore/Image/Studio/_macros.html.twig" as studio %}
3 
+
4 
+{% block content %}
5 
+  {% if teammembers is not empty %}
6 
+    <div class="swiper-slider">
7 
+      <div id="swiper-{{ id }}"class="swiper-container">
8 
+        <ul class="swiper-wrapper is-animated -move -move-top animate-children -fade">
9 
+          {% for member in teammembers %}
10 
+            <li class="swiper-slide">
11 
+              <div class="content">
12 
+                {% if member.imageFigure %}
13 
+                  {{- studio.figure(member.imageFigure, { attr: { class: ('image_container ') }}) -}}
14 
+                {% endif %}
15 
+                <div class="name">{{ member.firstname }} {{ member.lastname }}</div>
16 
+                <div class="position">{{ member.position }}</div>
17 
+                <div class="comment">{{ member.comment }}</div>
18 
+              </div>
19 
+            </li>
20 
+          {% endfor %}
21 
+        </ul>
22 
+        <div class="nav-holder">
23 
+          <div class="content-wrapper">
24 
+            <div class="swiper-button-next"></div>
25 
+            <div class="swiper-button-prev"></div>
26 
+          </div>
27 
+        </div>
28 
+      </div>
29 
+    </div>
30 
+  {% endif %}
31 
+
32 
+  <script>
33 
+    var swiperEl = document.getElementById('swiper-{{ id }}');
34 
+    new Swiper(swiperEl, {
35 
+      "loop": false,
36 
+      "speed": 1000,
37 
+      "slidesPerColumn": 2,
38 
+      "slidesPerColumnFill": 'row',
39 
+      "slidesPerView": 6,
40 
+      "slidesPerGroup": 6,
41 
+      "spaceBetween": 5,
42 
+      "effect": "slide",
43 
+      "navigation": {
44 
+        "nextEl": swiperEl.querySelectorAll('.swiper-button-next')[0],
45 
+        "prevEl": swiperEl.querySelectorAll('.swiper-button-prev')[0]
46 
+      },
47 
+      "breakpoints": {
48 
+        1980: {
49 
+          "slidesPerView": 6,
50 
+          "slidesPerGroup": 6,
51 
+          "slidesPerColumn": 2,
52 
+        },
53 
+        1650: {
54 
+          "slidesPerView": 5,
55 
+          "slidesPerGroup": 5,
56 
+          "slidesPerColumn": 2,
57 
+        },
58 
+        1320: {
59 
+          "slidesPerView": 4,
60 
+          "slidesPerGroup": 4,
61 
+          "slidesPerColumn": 2,
62 
+        },
63 
+        990: {
64 
+          "slidesPerView": 3,
65 
+          "slidesPerGroup": 3,
66 
+          "slidesPerColumn": 2,
67 
+        },
68 
+        660: {
69 
+          "slidesPerView": 2,
70 
+          "slidesPerGroup": 2,
71 
+          "slidesPerColumn": 1,
72 
+        },
73 
+        0: {
74 
+          "slidesPerView": 1,
75 
+          "slidesPerGroup": 1,
76 
+          "slidesPerColumn": 1,
77 
+        }
78 
+      },
79 
+      "on": {
80 
+        "slideChangeTransitionEnd": function (swiper) {
81 
+          window.dispatchEvent(new Event('scroll'));
82 
+        }
83 
+      }
84 
+    })</script>
85 
+{% endblock %}