Skip to content

Commit 3db8f56

Browse files
freinhardfreinhard
committed
Slider for customer logos
1 parent 1231cbd commit 3db8f56

2 files changed

Lines changed: 86 additions & 169 deletions

File tree

‎assets/static/custom.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,30 @@ footer {margin-top: 100px;}
226226
background: #fff;
227227
}
228228

229+
.brand-logo .carousel-item {
230+
min-height: 300px;
231+
}
232+
233+
.customers-pagination {
234+
position: static;
235+
margin-top: 10px;
236+
margin-bottom: 0;
237+
}
238+
239+
.customers-pagination [data-bs-target] {
240+
width: 12px;
241+
height: 12px;
242+
border: 0;
243+
border-radius: 50%;
244+
margin: 0 6px;
245+
opacity: 0.35;
246+
background-color: #dc0018;
247+
}
248+
249+
.customers-pagination .active {
250+
opacity: 1;
251+
}
252+
229253
.blog-section ul {
230254
margin: 40px 0px;
231255
}

‎templates/frontpage.html‎

Lines changed: 62 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -36,177 +36,70 @@ <h1 class="heading-1">Cloud für die öffentliche Verwaltung🇨🇭</h1>
3636

3737
<section class="customers">
3838
<div class="container" data-aos="fade-up">
39-
40-
<div class="brand-logo text-center">
41-
<div class="row align-items-center">
42-
<div class="col-6 col-md-4 col-lg-2">
43-
<div class="card">
44-
<img src="{{ 'static/images/customer-icons/zg.svg'|asseturl }}" alt="Kanton Zug">
45-
</div>
46-
</div>
47-
<div class="col-6 col-md-4 col-lg-2">
48-
<div class="card">
49-
<img src="{{ 'static/images/customer-icons/bs.png'|asseturl }}" alt="Kanton Basel Stadt">
50-
</div>
51-
</div>
52-
<div class="col-6 col-md-4 col-lg-2">
53-
<div class="card">
54-
<img src="{{ 'static/images/customer-icons/sg.svg'|asseturl }}" alt="Kanton St. Gallen">
55-
</div>
56-
</div>
57-
<div class="col-6 col-md-4 col-lg-2">
58-
<div class="card">
59-
<img src="{{ 'static/images/customer-icons/sz.svg'|asseturl }}" alt="Kanton Schwyz">
60-
</div>
61-
</div>
62-
<div class="col-6 col-md-4 col-lg-2">
63-
<div class="card">
64-
<img src="{{ 'static/images/customer-icons/gr.svg'|asseturl }}" alt="Kanton Graubünden">
65-
</div>
66-
</div>
67-
<div class="col-6 col-md-4 col-lg-2">
68-
<div class="card">
69-
<img src="{{ 'static/images/customer-icons/ar.svg'|asseturl }}"
70-
alt="Kanton Appenzell Ausserrhoden">
71-
</div>
72-
</div>
73-
</div>
74-
<div class="row align-items-center">
75-
<div class="col-6 col-md-4 col-lg-2">
76-
<div class="card">
77-
<img src="{{ 'static/images/customer-icons/gl.svg'|asseturl }}" alt="Kanton Glarus">
78-
</div>
79-
</div>
80-
<div class="col-6 col-md-4 col-lg-2">
81-
<div class="card">
82-
<img src="{{ 'static/images/customer-icons/lu.svg'|asseturl }}" alt="Kanton Luzern">
83-
</div>
84-
</div>
85-
<div class="col-6 col-md-4 col-lg-2">
86-
<div class="card">
87-
<img src="{{ 'static/images/customer-icons/ai.svg'|asseturl }}" alt="Appenzell Innerrhoden">
88-
</div>
89-
</div>
90-
<div class="col-6 col-md-4 col-lg-2">
91-
<div class="card">
92-
<img src="{{ 'static/images/customer-icons/sh.svg'|asseturl }}" alt="Kanton Schaffhausen">
93-
</div>
94-
</div>
95-
<div class="col-6 col-md-4 col-lg-2">
96-
<div class="card">
97-
<img src="{{ 'static/images/customer-icons/bl.svg'|asseturl }}" alt="Kanton Basel Landschaft">
98-
</div>
99-
</div>
100-
<div class="col-6 col-md-4 col-lg-2">
101-
<div class="card">
102-
<img src="{{ 'static/images/customer-icons/stadt-bern.svg'|asseturl }}" alt="Stadt Bern">
103-
</div>
104-
</div>
105-
</div>
106-
<div class="row align-items-center">
107-
<div class="col-6 col-md-4 col-lg-2">
108-
<div class="card">
109-
<img src="{{ 'static/images/customer-icons/winterthur.svg'|asseturl }}" alt="Stadt Winterhur">
110-
</div>
111-
</div>
112-
<div class="col-6 col-md-4 col-lg-2">
113-
<div class="card">
114-
<img src="{{ 'static/images/customer-icons/privatim.png'|asseturl }}" alt="privatim - Konferenz der schweizerischen Datenschutzbeauftragten">
115-
</div>
116-
</div>
117-
<div class="col-6 col-md-4 col-lg-2">
118-
<div class="card">
119-
<img src="{{ 'static/images/customer-icons/ersigen.png'|asseturl }}" alt="Gemeinde Ersigen">
120-
</div>
121-
</div>
122-
<div class="col-6 col-md-4 col-lg-2">
123-
<div class="card">
124-
<img src="{{ 'static/images/customer-icons/ebikon.png'|asseturl }}" alt="Gemeinde Ebikon">
125-
</div>
126-
</div>
127-
<div class="col-6 col-md-4 col-lg-2">
128-
<div class="card">
129-
<img src="{{ 'static/images/customer-icons/duerrenaesch.svg'|asseturl }}"
130-
alt="Gemeinde Dürrenäsch">
131-
</div>
132-
</div>
133-
<div class="col-6 col-md-4 col-lg-2">
134-
<div class="card">
135-
<img src="{{ 'static/images/customer-icons/lauerz.png'|asseturl }}" alt="Gemeinde Lauerz">
136-
</div>
137-
</div>
138-
</div>
139-
<div class="row align-items-center">
140-
<div class="col-6 col-md-4 col-lg-2">
141-
<div class="card">
142-
<img src="{{ 'static/images/customer-icons/neuheim.png'|asseturl }}" alt="Gemeinde Neuheim">
143-
</div>
144-
</div>
145-
<div class="col-6 col-md-4 col-lg-2">
146-
<div class="card">
147-
<img src="{{ 'static/images/customer-icons/steinhausen.png'|asseturl }}"
148-
alt="Gemeinde Steinhausen">
149-
</div>
150-
</div>
151-
<div class="col-6 col-md-4 col-lg-2">
152-
<div class="card">
153-
<img src="{{ 'static/images/customer-icons/huenenberg.png'|asseturl }}"
154-
alt="Gemeinde Hünenberg">
155-
</div>
156-
</div>
157-
<div class="col-6 col-md-4 col-lg-2">
158-
<div class="card">
159-
<img src="{{ 'static/images/customer-icons/ottenbach.png'|asseturl }}" alt="Gemeinde Ottenbach">
160-
</div>
161-
</div>
162-
<div class="col-6 col-md-4 col-lg-2">
163-
<div class="card">
164-
<img src="{{ 'static/images/customer-icons/risch-rotkreuz.png'|asseturl }}"
165-
alt="Gemeinde Risch Rotkreuz">
166-
</div>
167-
</div>
168-
<div class="col-6 col-md-4 col-lg-2">
169-
<div class="card">
170-
<img src="{{ 'static/images/customer-icons/besenbueren.png'|asseturl }}"
171-
alt="Gemeinde Besenbüren">
39+
{% set customer_logos = [
40+
{'src': 'static/images/customer-icons/zg.svg', 'alt': 'Kanton Zug'},
41+
{'src': 'static/images/customer-icons/bs.png', 'alt': 'Kanton Basel Stadt'},
42+
{'src': 'static/images/customer-icons/sg.svg', 'alt': 'Kanton St. Gallen'},
43+
{'src': 'static/images/customer-icons/sz.svg', 'alt': 'Kanton Schwyz'},
44+
{'src': 'static/images/customer-icons/gr.svg', 'alt': 'Kanton Graubünden'},
45+
{'src': 'static/images/customer-icons/ar.svg', 'alt': 'Kanton Appenzell Ausserrhoden'},
46+
{'src': 'static/images/customer-icons/gl.svg', 'alt': 'Kanton Glarus'},
47+
{'src': 'static/images/customer-icons/lu.svg', 'alt': 'Kanton Luzern'},
48+
{'src': 'static/images/customer-icons/ai.svg', 'alt': 'Appenzell Innerrhoden'},
49+
{'src': 'static/images/customer-icons/sh.svg', 'alt': 'Kanton Schaffhausen'},
50+
{'src': 'static/images/customer-icons/bl.svg', 'alt': 'Kanton Basel Landschaft'},
51+
{'src': 'static/images/customer-icons/stadt-bern.svg', 'alt': 'Stadt Bern'},
52+
{'src': 'static/images/customer-icons/winterthur.svg', 'alt': 'Stadt Winterhur'},
53+
{'src': 'static/images/customer-icons/privatim.png', 'alt': 'privatim - Konferenz der schweizerischen Datenschutzbeauftragten'},
54+
{'src': 'static/images/customer-icons/ersigen.png', 'alt': 'Gemeinde Ersigen'},
55+
{'src': 'static/images/customer-icons/ebikon.png', 'alt': 'Gemeinde Ebikon'},
56+
{'src': 'static/images/customer-icons/duerrenaesch.svg', 'alt': 'Gemeinde Dürrenäsch'},
57+
{'src': 'static/images/customer-icons/lauerz.png', 'alt': 'Gemeinde Lauerz'},
58+
{'src': 'static/images/customer-icons/neuheim.png', 'alt': 'Gemeinde Neuheim'},
59+
{'src': 'static/images/customer-icons/steinhausen.png', 'alt': 'Gemeinde Steinhausen'},
60+
{'src': 'static/images/customer-icons/huenenberg.png', 'alt': 'Gemeinde Hünenberg'},
61+
{'src': 'static/images/customer-icons/ottenbach.png', 'alt': 'Gemeinde Ottenbach'},
62+
{'src': 'static/images/customer-icons/risch-rotkreuz.png', 'alt': 'Gemeinde Risch Rotkreuz'},
63+
{'src': 'static/images/customer-icons/besenbueren.png', 'alt': 'Gemeinde Besenbüren'},
64+
{'src': 'static/images/customer-icons/musikschule-rontal.svg', 'alt': 'Musikschule Rontal'},
65+
{'src': 'static/images/customer-icons/ph-zug.png', 'alt': 'PH Zug'},
66+
{'src': 'static/images/customer-icons/pro-juventute.svg', 'alt': 'Pro Juventute'},
67+
{'src': 'static/images/customer-icons/universitaet-bern.svg', 'alt': 'Universität Bern'},
68+
{'src': 'static/images/customer-icons/neuenkirch.svg', 'alt': 'Gemeinde Neuenkirch'},
69+
{'src': 'static/images/customer-icons/meggen.png', 'alt': 'Gemeinde Meggen'}
70+
] %}
71+
{% set logo_sets = customer_logos|batch(12, None)|list %}
72+
73+
<div id="customerLogoCarousel" class="brand-logo text-center carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
74+
<div class="carousel-inner">
75+
{% for logo_set in logo_sets %}
76+
<div class="carousel-item{% if loop.first %} active{% endif %}">
77+
{% for logo_row in logo_set|batch(6, None) %}
78+
<div class="row align-items-center">
79+
{% for logo in logo_row %}
80+
{% if logo %}
81+
<div class="col-6 col-md-4 col-lg-2">
82+
<div class="card">
83+
<img src="{{ logo.src|asseturl }}" alt="{{ logo.alt }}">
84+
</div>
85+
</div>
86+
{% endif %}
87+
{% endfor %}
88+
</div>
89+
{% endfor %}
17290
</div>
173-
</div>
91+
{% endfor %}
17492
</div>
175-
<div class="row align-items-center">
176-
<div class="col-6 col-md-4 col-lg-2">
177-
<div class="card">
178-
<img src="{{ 'static/images/customer-icons/musikschule-rontal.svg'|asseturl }}"
179-
alt="Musikschule Rontal">
180-
</div>
181-
</div>
182-
<div class="col-6 col-md-4 col-lg-2">
183-
<div class="card">
184-
<img src="{{ 'static/images/customer-icons/ph-zug.png'|asseturl }}" alt="PH Zug">
185-
</div>
186-
</div>
187-
<div class="col-6 col-md-4 col-lg-2">
188-
<div class="card">
189-
<img src="{{ 'static/images/customer-icons/pro-juventute.svg'|asseturl }}" alt="Pro Juventute">
190-
</div>
191-
</div>
192-
<div class="col-6 col-md-4 col-lg-2">
193-
<div class="card">
194-
<img src="{{ 'static/images/customer-icons/universitaet-bern.svg'|asseturl }}"
195-
alt="Universität Bern">
196-
</div>
197-
</div>
198-
<div class="col-6 col-md-4 col-lg-2">
199-
<div class="card">
200-
<img src="{{ 'static/images/customer-icons/neuenkirch.svg'|asseturl }}"
201-
alt="Gemeinde Neuenkirch">
202-
</div>
203-
</div>
204-
<div class="col-6 col-md-4 col-lg-2">
205-
<div class="card">
206-
<img src="{{ 'static/images/customer-icons/meggen.png'|asseturl }}"
207-
alt="Gemeinde Meggen">
208-
</div>
209-
</div>
93+
94+
<div class="carousel-indicators customers-pagination">
95+
{% for _ in logo_sets %}
96+
<button
97+
type="button"
98+
data-bs-target="#customerLogoCarousel"
99+
data-bs-slide-to="{{ loop.index0 }}"
100+
{% if loop.first %}class="active" aria-current="true"{% endif %}
101+
aria-label="Slide {{ loop.index }}"></button>
102+
{% endfor %}
210103
</div>
211104
</div>
212105
</div>

0 commit comments

Comments
 (0)