<div class="o-people-grid o-people-grid--horizontal">
<div class="o-people-grid__wrapper">
<div class="o-people-grid__cat-title">
<h2 class="a-cat-title">
<span class="a-cat-title__link a-cat-title__link--no-link">Grüne Menschen</span>
</h2>
</div>
<h3 class="o-people-grid__title">Wir engagieren uns als Grüne</h3>
<div class="o-people-grid__library-container swiper-container">
<div class="o-people-grid__slider swiper-wrapper">
<div class="o-people-grid__slide swiper-slide">
<article class="m-person-slide">
<figure class="m-person-slide__figure">
<div class="m-person-slide__image">
<figure class="a-image a-image--cover">
<img src="/img/adrian-345.jpg" alt="Adrian Aulbach" title="" class="a-image__image a-image__image--fp a-image__image--fp-">
</figure>
</div>
<figcaption class="m-person-slide__caption">
<p class="m-person-slide__quote">Grün – Aber sicher! Für eine sichere Energieversorgung, sicheren Verkehr und sichere Arbeitsplätze.</p>
<p class="m-person-slide__meta">
<span class="m-person-slide__author">Adrian Aulbach</span>,
<span class="m-person-slide__job">Softwareentwickler, Student, Co-Präsident Grüne Interlaken-Oberhasli</span>
</p>
</figcaption>
</figure>
</article>
</div>
<div class="o-people-grid__slide swiper-slide">
<article class="m-person-slide">
<figure class="m-person-slide__figure">
<div class="m-person-slide__image">
<figure class="a-image a-image--cover">
<img src="/img/anna_q-345.jpg" alt="Anna de Quervain" title="" class="a-image__image a-image__image--fp a-image__image--fp-">
</figure>
</div>
<figcaption class="m-person-slide__caption">
<p class="m-person-slide__quote">Investitionen in Bildung und Integration sind Investitionen in die Zukunft.</p>
<p class="m-person-slide__meta">
<span class="m-person-slide__author">Anna de Quervain</span>,
<span class="m-person-slide__job">Stadträtin Burgdorf, Fraktionssprecherin, Vorstand Operation Libero Bern</span>
</p>
</figcaption>
</figure>
</article>
</div>
<div class="o-people-grid__slide swiper-slide">
<article class="m-person-slide">
<figure class="m-person-slide__figure">
<div class="m-person-slide__image">
<figure class="a-image a-image--cover">
<img src="/img/anna_z-345.jpg" alt="Anna Zeilstra" title="" class="a-image__image a-image__image--fp a-image__image--fp-">
</figure>
</div>
<figcaption class="m-person-slide__caption">
<p class="m-person-slide__quote">Ich setze mich für Minderheiten und eine offene Gesellschaft ein.</p>
<p class="m-person-slide__meta">
<span class="m-person-slide__author">Anna Zeilstra</span>,
<span class="m-person-slide__job">Sozialpädagogin HF, Präsidentin Grüne Spiez, Mitglied GGR Spiez, Mitglied Sozialkommission</span>
</p>
</figcaption>
</figure>
</article>
</div>
<div class="o-people-grid__slide swiper-slide">
<article class="m-person-slide">
<figure class="m-person-slide__figure">
<div class="m-person-slide__image">
<figure class="a-image a-image--cover">
<img src="/img/carole-345.jpg" alt="Carole Klopfstein" title="" class="a-image__image a-image__image--fp a-image__image--fp-">
</figure>
</div>
<figcaption class="m-person-slide__caption">
<p class="m-person-slide__quote">Soziale Verantwortung, Solidarität und Nachhaltigkeit - Nicht alle Aspekte der Gesellschaft lassen sich durch die Wirtschaft lösen.</p>
<p class="m-person-slide__meta">
<span class="m-person-slide__author">Carole Klopfstein</span>,
<span class="m-person-slide__job">Gemeinderätin GGR Muri-Gümligen, Projektleiterin</span>
</p>
</figcaption>
</figure>
</article>
</div>
<div class="o-people-grid__slide swiper-slide">
<article class="m-person-slide">
<figure class="m-person-slide__figure">
<div class="m-person-slide__image">
<figure class="a-image a-image--cover">
<img src="/img/cyril-345.jpg" alt="Cyril Bucher" title="" class="a-image__image a-image__image--fp a-image__image--fp-">
</figure>
</div>
<figcaption class="m-person-slide__caption">
<p class="m-person-slide__quote">Investition in Bildung und Gesundheit. Förderung des Sportes. Nachhaltigkeit in der Wirtschaft.</p>
<p class="m-person-slide__meta">
<span class="m-person-slide__author">Cyril Bucher</span>,
<span class="m-person-slide__job">Medizinstudent</span>
</p>
</figcaption>
</figure>
</article>
</div>
<div class="o-people-grid__slide swiper-slide">
<article class="m-person-slide">
<figure class="m-person-slide__figure">
<div class="m-person-slide__image">
<figure class="a-image a-image--cover">
<img src="/img/adrian-345.jpg" alt="Adrian Aulbach" title="" class="a-image__image a-image__image--fp a-image__image--fp-">
</figure>
</div>
<figcaption class="m-person-slide__caption">
<p class="m-person-slide__quote">Grün – Aber sicher! Für eine sichere Energieversorgung, sicheren Verkehr und sichere Arbeitsplätze.</p>
<p class="m-person-slide__meta">
<span class="m-person-slide__author">Adrian Aulbach</span>,
<span class="m-person-slide__job">Softwareentwickler, Student, Co-Präsident Grüne Interlaken-Oberhasli</span>
</p>
</figcaption>
</figure>
</article>
</div>
<div class="o-people-grid__slide swiper-slide">
<article class="m-person-slide">
<figure class="m-person-slide__figure">
<div class="m-person-slide__image">
<figure class="a-image a-image--cover">
<img src="/img/anna_q-345.jpg" alt="Anna de Quervain" title="" class="a-image__image a-image__image--fp a-image__image--fp-">
</figure>
</div>
<figcaption class="m-person-slide__caption">
<p class="m-person-slide__quote">Investitionen in Bildung und Integration sind Investitionen in die Zukunft.</p>
<p class="m-person-slide__meta">
<span class="m-person-slide__author">Anna de Quervain</span>,
<span class="m-person-slide__job">Stadträtin Burgdorf, Fraktionssprecherin, Vorstand Operation Libero Bern</span>
</p>
</figcaption>
</figure>
</article>
</div>
<div class="o-people-grid__slide swiper-slide">
<article class="m-person-slide">
<figure class="m-person-slide__figure">
<div class="m-person-slide__image">
<figure class="a-image a-image--cover">
<img src="/img/anna_z-345.jpg" alt="Anna Zeilstra" title="" class="a-image__image a-image__image--fp a-image__image--fp-">
</figure>
</div>
<figcaption class="m-person-slide__caption">
<p class="m-person-slide__quote">Ich setze mich für Minderheiten und eine offene Gesellschaft ein.</p>
<p class="m-person-slide__meta">
<span class="m-person-slide__author">Anna Zeilstra</span>,
<span class="m-person-slide__job">Sozialpädagogin HF, Präsidentin Grüne Spiez, Mitglied GGR Spiez, Mitglied Sozialkommission</span>
</p>
</figcaption>
</figure>
</article>
</div>
<div class="o-people-grid__slide swiper-slide">
<article class="m-person-slide">
<figure class="m-person-slide__figure">
<div class="m-person-slide__image">
<figure class="a-image a-image--cover">
<img src="/img/carole-345.jpg" alt="Carole Klopfstein" title="" class="a-image__image a-image__image--fp a-image__image--fp-">
</figure>
</div>
<figcaption class="m-person-slide__caption">
<p class="m-person-slide__quote">Soziale Verantwortung, Solidarität und Nachhaltigkeit - Nicht alle Aspekte der Gesellschaft lassen sich durch die Wirtschaft lösen.</p>
<p class="m-person-slide__meta">
<span class="m-person-slide__author">Carole Klopfstein</span>,
<span class="m-person-slide__job">Gemeinderätin GGR Muri-Gümligen, Projektleiterin</span>
</p>
</figcaption>
</figure>
</article>
</div>
<div class="o-people-grid__slide swiper-slide">
<article class="m-person-slide">
<figure class="m-person-slide__figure">
<div class="m-person-slide__image">
<figure class="a-image a-image--cover">
<img src="/img/cyril-345.jpg" alt="Cyril Bucher" title="" class="a-image__image a-image__image--fp a-image__image--fp-">
</figure>
</div>
<figcaption class="m-person-slide__caption">
<p class="m-person-slide__quote">Investition in Bildung und Gesundheit. Förderung des Sportes. Nachhaltigkeit in der Wirtschaft.</p>
<p class="m-person-slide__meta">
<span class="m-person-slide__author">Cyril Bucher</span>,
<span class="m-person-slide__job">Medizinstudent</span>
</p>
</figcaption>
</figure>
</article>
</div>
</div>
</div>
<button class="o-people-grid__slide-button o-people-grid__slide-button--left" aria-label="Vorherige Person anzeigen">
<svg role="img">
<title></title>
<use xlink:href="#slide"></use>
</svg>
</button>
<button class="o-people-grid__slide-button o-people-grid__slide-button--right" aria-controls="o-people-grid__slider" aria-label="Nächste Person anzeigen">
<svg role="img">
<title></title>
<use xlink:href="#slide"></use>
</svg>
</button>
</div>
</div>
<div class="o-people-grid {{modifiers_classes}}">
<div class="o-people-grid__wrapper">
<div class="o-people-grid__cat-title">
{{> @a-cat-title cat-title}}
</div>
<h3 class="o-people-grid__title">{{title}}</h3>
<div class="o-people-grid__library-container swiper-container">
<div class="o-people-grid__slider swiper-wrapper">
{{#each slides}}
<div class="o-people-grid__slide swiper-slide">
{{> @m-person-slide this}}
</div>
{{/each}}
</div>
</div>
{{#if horizontal}}
<button class="o-people-grid__slide-button o-people-grid__slide-button--left"
aria-label="{{aria-label-slide-left}}">
<svg role="img">
<title>{{ 'Slide to the left' }}</title>
<use xlink:href="#slide"></use>
</svg>
</button>
<button class="o-people-grid__slide-button o-people-grid__slide-button--right"
aria-controls="o-people-grid__slider" aria-label="{{aria-label-slide-right}}">
<svg role="img">
<title>{{'Slide to the right'}}</title>
<use xlink:href="#slide"></use>
</svg>
</button>
{{/if}}
</div>
</div>
.o-people-grid {
&--horizontal {
width: 100%;
height: 100%;
overflow: hidden;
background: $color-grey-1;
position: relative;
z-index: 1; // Fix of Webkit flickering
@include fluid-props(margin-top margin-bottom padding-top padding-bottom, $fluid-min, $fluid-max, 5px, 25px);
}
&--horizontal &__wrapper {
@extend .grid-item;
@include media($_DESKTOP) {
max-width: $grid-max-width-max;
}
}
&__cat-title {
@include fluid-props(margin-bottom, $size-tiny, $size-medium, 20px, 34px);
}
&__title {
@include fluid-props(font-size, $size-tiny, $size-medium, 32px, 48px);
@include fluid-props(margin-top, $size-tiny, $size-medium, 20px, 34px);
@include fluid-props(margin-bottom, $size-tiny, $size-medium, 26px, 56px);
}
&--vertical &__slider {
display: grid;
grid-gap: 32px;
align-content: space-between;
grid-auto-flow: row;
grid-template-columns: 1fr;
@include media(480px) {
grid-template-columns: repeat(2, calc(50% - 16px));
}
@include media($size-medium) {
grid-template-columns: repeat(3, 242px);
}
}
&--horizontal &__slider {
display: flex;
align-items: stretch;
position: relative;
z-index: 1;
transition-property: transform;
box-sizing: content-box;
transform: translate3d(0px, 0, 0);
cursor: grab;
}
&__slide {
background: $color-white;
}
&--horizontal &__slide {
@include fluid-props(margin-right, $size-tiny, $size-medium, 20px, 32px);
position: relative;
transition-property: transform;
.m-person-slide {
width: 220px;
@include media($size-tiny) {
width: 280px;
}
@include media($_DESKTOP) {
width: 288px;
}
}
}
&__slide-button {
display: none;
position: absolute;
z-index: 10;
width: 108px;
padding-top: 0;
padding-bottom: 0;
@include fluid-props(top, $size-small, $size-medium, 211px, 240px); // dont ask
@include fluid-props(top, $size-medium, $fluid-max, 240px, 269px); // dont ask
@include fluid-props(top, $fluid-max, 2000px, 269px, 282px); // dont ask
height: 252px;
cursor: pointer;
@include media($size-small) {
display: block;
}
@include media($_DESKTOP) {
height: 259px;
}
@media screen and (hover: none) and (max-width: 1023px) {
// don't combine this query with the one above to work around the missing support in firefox
display: none;
}
&.swiper-button-disabled {
display: none;
}
@include hover {
svg {
fill: $color-primary-dark;
}
}
svg {
height: 48px;
width: 48px;
fill: $color-primary;
stroke: $color-white;
transition: fill $transition-fast $transition-ease;
@include high-contrast {
fill: $color-primary-dark;
}
}
&--left {
left: 0;
svg {
transform: rotate(180deg);
}
}
&--right {
right: 0;
}
}
}
import BaseView from './../../../js/base-view';
import Swiper, { A11y, Keyboard, Navigation } from 'swiper';
// Install modules
Swiper.use([Keyboard, Navigation, A11y]);
const SWIPER_CONTAINER_SELECTOR = '.o-people-grid__library-container';
const SLIDER_NEXT_BUTTON_SELECTOR = '.o-people-grid__slide-button--right';
const SLIDER_PREVIOUS_BUTTON_SELECTOR = '.o-people-grid__slide-button--left';
export default class OPeopleGrid extends BaseView {
bind() {
super.bind();
new Swiper( SWIPER_CONTAINER_SELECTOR, {
slidesPerView: 'auto',
navigation: {
nextEl: SLIDER_NEXT_BUTTON_SELECTOR,
prevEl: SLIDER_PREVIOUS_BUTTON_SELECTOR,
},
keyboard: {
enabled: true,
onlyInViewport: false,
},
} );
}
}
{
"title": "Wir engagieren uns als Grüne",
"aria-label-slide-left": "Vorherige Person anzeigen",
"aria-label-slide-right": "Nächste Person anzeigen",
"horizontal": true,
"modifiers": [
"horizontal"
],
"cat-title": {
"label": "Grüne Menschen",
"link": "#"
},
"slides": [
{
"author": "Adrian Aulbach",
"alt": "Adrian Aulbach",
"image": "/img/adrian-345.jpg",
"quote": "Grün – Aber sicher! Für eine sichere Energieversorgung, sicheren Verkehr und sichere Arbeitsplätze.",
"job": "Softwareentwickler, Student, Co-Präsident Grüne Interlaken-Oberhasli"
},
{
"author": "Anna de Quervain",
"alt": "Anna de Quervain",
"image": "/img/anna_q-345.jpg",
"quote": "Investitionen in Bildung und Integration sind Investitionen in die Zukunft.",
"job": "Stadträtin Burgdorf, Fraktionssprecherin, Vorstand Operation Libero Bern"
},
{
"author": "Anna Zeilstra",
"alt": "Anna Zeilstra",
"image": "/img/anna_z-345.jpg",
"quote": "Ich setze mich für Minderheiten und eine offene Gesellschaft ein.",
"job": "Sozialpädagogin HF, Präsidentin Grüne Spiez, Mitglied GGR Spiez, Mitglied Sozialkommission"
},
{
"author": "Carole Klopfstein",
"alt": "Carole Klopfstein",
"image": "/img/carole-345.jpg",
"quote": "Soziale Verantwortung, Solidarität und Nachhaltigkeit - Nicht alle Aspekte der Gesellschaft lassen sich durch die Wirtschaft lösen.",
"job": "Gemeinderätin GGR Muri-Gümligen, Projektleiterin"
},
{
"author": "Cyril Bucher",
"alt": "Cyril Bucher",
"image": "/img/cyril-345.jpg",
"quote": "Investition in Bildung und Gesundheit. Förderung des Sportes. Nachhaltigkeit in der Wirtschaft.",
"job": "Medizinstudent"
},
{
"author": "Adrian Aulbach",
"alt": "Adrian Aulbach",
"image": "/img/adrian-345.jpg",
"quote": "Grün – Aber sicher! Für eine sichere Energieversorgung, sicheren Verkehr und sichere Arbeitsplätze.",
"job": "Softwareentwickler, Student, Co-Präsident Grüne Interlaken-Oberhasli"
},
{
"author": "Anna de Quervain",
"alt": "Anna de Quervain",
"image": "/img/anna_q-345.jpg",
"quote": "Investitionen in Bildung und Integration sind Investitionen in die Zukunft.",
"job": "Stadträtin Burgdorf, Fraktionssprecherin, Vorstand Operation Libero Bern"
},
{
"author": "Anna Zeilstra",
"alt": "Anna Zeilstra",
"image": "/img/anna_z-345.jpg",
"quote": "Ich setze mich für Minderheiten und eine offene Gesellschaft ein.",
"job": "Sozialpädagogin HF, Präsidentin Grüne Spiez, Mitglied GGR Spiez, Mitglied Sozialkommission"
},
{
"author": "Carole Klopfstein",
"alt": "Carole Klopfstein",
"image": "/img/carole-345.jpg",
"quote": "Soziale Verantwortung, Solidarität und Nachhaltigkeit - Nicht alle Aspekte der Gesellschaft lassen sich durch die Wirtschaft lösen.",
"job": "Gemeinderätin GGR Muri-Gümligen, Projektleiterin"
},
{
"author": "Cyril Bucher",
"alt": "Cyril Bucher",
"image": "/img/cyril-345.jpg",
"quote": "Investition in Bildung und Gesundheit. Förderung des Sportes. Nachhaltigkeit in der Wirtschaft.",
"job": "Medizinstudent"
}
]
}
No notes defined.