eSales Media Git repositories
Browse code

Progress

Benjamin Roth authored on15/11/2022 16:38:13
Showing1 changed files
contao/templates/mod_team_list.html.twig
History View file @68914d2
... ... 
@@ -37,7 +37,7 @@
37 37 
       "slidesPerColumn": 2,
38 38 
       "slidesPerColumnFill": 'row',
39 39 
       "slidesPerView": 6,
40 
-      "slidesPerGroup": 12,
40 
+      "slidesPerGroup": 6,
41 41 
       "spaceBetween": 5,
42 42 
       "effect": "slide",
43 43 
       "navigation": {
... ... 
@@ -47,33 +47,33 @@
47 47 
       "breakpoints": {
48 48 
         1980: {
49 49 
           "slidesPerView": 6,
50 
-          "slidesPerGroup": 12,
50 
+          "slidesPerGroup": 6,
51 51 
           "slidesPerColumn": 2,
52 52 
         },
53 53 
         1650: {
54 54 
           "slidesPerView": 5,
55 
-          "slidesPerGroup": 10,
55 
+          "slidesPerGroup": 5,
56 56 
           "slidesPerColumn": 2,
57 57 
         },
58 58 
         1320: {
59 59 
           "slidesPerView": 4,
60 
-          "slidesPerGroup": 8,
60 
+          "slidesPerGroup": 4,
61 61 
           "slidesPerColumn": 2,
62 62 
         },
63 63 
         990: {
64 64 
           "slidesPerView": 3,
65 
-          "slidesPerGroup": 6,
65 
+          "slidesPerGroup": 3,
66 66 
           "slidesPerColumn": 2,
67 67 
         },
68 68 
         660: {
69 69 
           "slidesPerView": 2,
70 
-          "slidesPerGroup": 4,
71 
-          "slidesPerColumn": 2,
70 
+          "slidesPerGroup": 2,
71 
+          "slidesPerColumn": 1,
72 72 
         },
73 73 
         0: {
74 74 
           "slidesPerView": 1,
75 
-          "slidesPerGroup": 2,
76 
-          "slidesPerColumn": 2,
75 
+          "slidesPerGroup": 1,
76 
+          "slidesPerColumn": 1,
77 77 
         }
78 78 
       }
79 79 
     })</script>
Browse code

Progress

Benjamin Roth authored on15/11/2022 15:35:41
Showing1 changed files
contao/templates/mod_team_list.html.twig
History View file @39e3ec0
... ... 
@@ -19,8 +19,12 @@
19 19 
             </li>
20 20 
           {% endfor %}
21 21 
         </ul>
22 
-        <div class="swiper-button-next"></div>
23 
-        <div class="swiper-button-prev"></div>
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>
24 28 
       </div>
25 29 
     </div>
26 30 
   {% endif %}
... ... 
@@ -28,12 +32,12 @@
28 32 
   <script>
29 33 
     var swiperEl = document.getElementById('swiper-{{ id }}');
30 34 
     new Swiper(swiperEl, {
31 
-      "loop": true,
32 
-      "speed": 500,
35 
+      "loop": false,
36 
+      "speed": 1000,
33 37 
       "slidesPerColumn": 2,
34 38 
       "slidesPerColumnFill": 'row',
35 
-      "slidesPerView": 5,
36 
-      "slidesPerGroup": 10,
39 
+      "slidesPerView": 6,
40 
+      "slidesPerGroup": 12,
37 41 
       "spaceBetween": 5,
38 42 
       "effect": "slide",
39 43 
       "navigation": {
... ... 
@@ -41,25 +45,35 @@
41 45 
         "prevEl": swiperEl.querySelectorAll('.swiper-button-prev')[0]
42 46 
       },
43 47 
       "breakpoints": {
48 
+        1980: {
49 
+          "slidesPerView": 6,
50 
+          "slidesPerGroup": 12,
51 
+          "slidesPerColumn": 2,
52 
+        },
44 53 
         1650: {
45 54 
           "slidesPerView": 5,
46 55 
           "slidesPerGroup": 10,
56 
+          "slidesPerColumn": 2,
47 57 
         },
48 58 
         1320: {
49 59 
           "slidesPerView": 4,
50 60 
           "slidesPerGroup": 8,
61 
+          "slidesPerColumn": 2,
51 62 
         },
52 63 
         990: {
53 64 
           "slidesPerView": 3,
54 65 
           "slidesPerGroup": 6,
66 
+          "slidesPerColumn": 2,
55 67 
         },
56 68 
         660: {
57 69 
           "slidesPerView": 2,
58 70 
           "slidesPerGroup": 4,
71 
+          "slidesPerColumn": 2,
59 72 
         },
60 73 
         0: {
61 74 
           "slidesPerView": 1,
62 75 
           "slidesPerGroup": 2,
76 
+          "slidesPerColumn": 2,
63 77 
         }
64 78 
       }
65 79 
     })</script>
Browse code

Remote Progress

Benjamin Roth authored on15/11/2022 13:29:09
Showing1 changed files
contao/templates/mod_team_list.html.twig
History View file @1ada865
... ... 
@@ -30,8 +30,10 @@
30 30 
     new Swiper(swiperEl, {
31 31 
       "loop": true,
32 32 
       "speed": 500,
33 
+      "slidesPerColumn": 2,
34 
+      "slidesPerColumnFill": 'row',
33 35 
       "slidesPerView": 5,
34 
-      "slidesPerGroup": 5,
36 
+      "slidesPerGroup": 10,
35 37 
       "spaceBetween": 5,
36 38 
       "effect": "slide",
37 39 
       "navigation": {
... ... 
@@ -41,23 +43,23 @@
41 43 
       "breakpoints": {
42 44 
         1650: {
43 45 
           "slidesPerView": 5,
44 
-          "slidesPerGroup": 5,
46 
+          "slidesPerGroup": 10,
45 47 
         },
46 48 
         1320: {
47 49 
           "slidesPerView": 4,
48 
-          "slidesPerGroup": 4,
50 
+          "slidesPerGroup": 8,
49 51 
         },
50 52 
         990: {
51 53 
           "slidesPerView": 3,
52 
-          "slidesPerGroup": 3,
54 
+          "slidesPerGroup": 6,
53 55 
         },
54 56 
         660: {
55 57 
           "slidesPerView": 2,
56 
-          "slidesPerGroup": 2,
58 
+          "slidesPerGroup": 4,
57 59 
         },
58 60 
         0: {
59 61 
           "slidesPerView": 1,
60 
-          "slidesPerGroup": 1,
62 
+          "slidesPerGroup": 2,
61 63 
         }
62 64 
       }
63 65 
     })</script>
Browse code

Remote Progress

Benjamin Roth authored on15/11/2022 13:22:22
Showing1 changed files
contao/templates/mod_team_list.html.twig
History View file @87d03ce
... ... 
@@ -8,12 +8,14 @@
8 8 
         <ul class="swiper-wrapper">
9 9 
           {% for member in teammembers %}
10 10 
             <li class="swiper-slide">
11 
-              {% if member.imageFigure %}
12 
-                {{- studio.figure(member.imageFigure, { attr: { class: ('image_container ') }}) -}}
13 
-              {% endif %}
14 
-              <div class="name">{{ member.firstname }} {{ member.lastname }}</div>
15 
-              <div class="position">{{ member.position }}</div>
16 
-              <div class="comment">{{ member.comment }}</div>
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>
17 19 
             </li>
18 20 
           {% endfor %}
19 21 
         </ul>
... ... 
@@ -37,11 +39,19 @@
37 39 
         "prevEl": swiperEl.querySelectorAll('.swiper-button-prev')[0]
38 40 
       },
39 41 
       "breakpoints": {
40 
-        900: {
42 
+        1650: {
41 43 
           "slidesPerView": 5,
42 44 
           "slidesPerGroup": 5,
43 45 
         },
44 
-        599: {
46 
+        1320: {
47 
+          "slidesPerView": 4,
48 
+          "slidesPerGroup": 4,
49 
+        },
50 
+        990: {
51 
+          "slidesPerView": 3,
52 
+          "slidesPerGroup": 3,
53 
+        },
54 
+        660: {
45 55 
           "slidesPerView": 2,
46 56 
           "slidesPerGroup": 2,
47 57 
         },
Browse code

Progress

Benjamin Roth authored on14/11/2022 23:17:53
Showing1 changed files
contao/templates/mod_team_list.html.twig
History View file @77acc4c
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,54 @@
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">
9 
+          {% for member in teammembers %}
10 
+            <li class="swiper-slide">
11 
+              {% if member.imageFigure %}
12 
+                {{- studio.figure(member.imageFigure, { attr: { class: ('image_container ') }}) -}}
13 
+              {% endif %}
14 
+              <div class="name">{{ member.firstname }} {{ member.lastname }}</div>
15 
+              <div class="position">{{ member.position }}</div>
16 
+              <div class="comment">{{ member.comment }}</div>
17 
+            </li>
18 
+          {% endfor %}
19 
+        </ul>
20 
+        <div class="swiper-button-next"></div>
21 
+        <div class="swiper-button-prev"></div>
22 
+      </div>
23 
+    </div>
24 
+  {% endif %}
25 
+
26 
+  <script>
27 
+    var swiperEl = document.getElementById('swiper-{{ id }}');
28 
+    new Swiper(swiperEl, {
29 
+      "loop": true,
30 
+      "speed": 500,
31 
+      "slidesPerView": 5,
32 
+      "slidesPerGroup": 5,
33 
+      "spaceBetween": 5,
34 
+      "effect": "slide",
35 
+      "navigation": {
36 
+        "nextEl": swiperEl.querySelectorAll('.swiper-button-next')[0],
37 
+        "prevEl": swiperEl.querySelectorAll('.swiper-button-prev')[0]
38 
+      },
39 
+      "breakpoints": {
40 
+        900: {
41 
+          "slidesPerView": 5,
42 
+          "slidesPerGroup": 5,
43 
+        },
44 
+        599: {
45 
+          "slidesPerView": 2,
46 
+          "slidesPerGroup": 2,
47 
+        },
48 
+        0: {
49 
+          "slidesPerView": 1,
50 
+          "slidesPerGroup": 1,
51 
+        }
52 
+      }
53 
+    })</script>
54 
+{% endblock %}