Quote-Slider @quote-slider
Dgb @quote-slider--dgb
<div class="quote-slider quote-slider--dgb-blue" data-autoplay="false" data-playing="false">
<div class="quote-slider__inner">
<div class="quote-slider__slides-wrap">
<div class="quote-slider__slides">
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">
<div class="quote-slider__source-image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Image of a human" height="160" src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" height="160" alt="Image of a human" /></div>
</div>Name Zitatgeber
</div>
</div>
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">Name Zitatgeber</div>
</div>
</div>
</div>
</div>
</div>{
"slides": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber",
"sliderImage": {
"alt": "Image of a human",
"width": 160,
"height": 160
}
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber"
}
],
"color": "dgb-blue"
}
Dgb Blue Light @quote-slider--dgb-blue-light
<div class="quote-slider quote-slider--dgb-blue-light" data-autoplay="false" data-playing="false">
<div class="quote-slider__inner">
<div class="quote-slider__slides-wrap">
<div class="quote-slider__slides">
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">
<div class="quote-slider__source-image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Image of a human" height="160" src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" height="160" alt="Image of a human" /></div>
</div>Name Zitatgeber
</div>
</div>
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">Name Zitatgeber</div>
</div>
</div>
</div>
</div>
</div>{
"slides": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber",
"sliderImage": {
"alt": "Image of a human",
"width": 160,
"height": 160
}
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber"
}
],
"color": "dgb-blue-light"
}
Dgb Green Light @quote-slider--dgb-green-light
<div class="quote-slider quote-slider--dgb-green-light" data-autoplay="false" data-playing="false">
<div class="quote-slider__inner">
<div class="quote-slider__slides-wrap">
<div class="quote-slider__slides">
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">
<div class="quote-slider__source-image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Image of a human" height="160" src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" height="160" alt="Image of a human" /></div>
</div>Name Zitatgeber
</div>
</div>
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">Name Zitatgeber</div>
</div>
</div>
</div>
</div>
</div>{
"slides": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber",
"sliderImage": {
"alt": "Image of a human",
"width": 160,
"height": 160
}
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber"
}
],
"color": "dgb-green-light"
}
Dgb Green @quote-slider--dgb-green
<div class="quote-slider quote-slider--dgb-green" data-autoplay="false" data-playing="false">
<div class="quote-slider__inner">
<div class="quote-slider__slides-wrap">
<div class="quote-slider__slides">
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">
<div class="quote-slider__source-image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Image of a human" height="160" src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" height="160" alt="Image of a human" /></div>
</div>Name Zitatgeber
</div>
</div>
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">Name Zitatgeber</div>
</div>
</div>
</div>
</div>
</div>{
"slides": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber",
"sliderImage": {
"alt": "Image of a human",
"width": 160,
"height": 160
}
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber"
}
],
"color": "dgb-green"
}
Dgb Red @quote-slider--dgb-red
<div class="quote-slider quote-slider--dgb-red" data-autoplay="false" data-playing="false">
<div class="quote-slider__inner">
<div class="quote-slider__slides-wrap">
<div class="quote-slider__slides">
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">
<div class="quote-slider__source-image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Image of a human" height="160" src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" height="160" alt="Image of a human" /></div>
</div>Name Zitatgeber
</div>
</div>
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">Name Zitatgeber</div>
</div>
</div>
</div>
</div>
</div>{
"slides": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber",
"sliderImage": {
"alt": "Image of a human",
"width": 160,
"height": 160
}
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber"
}
],
"color": "dgb-red"
}
Dgb Yellow @quote-slider--dgb-yellow
<div class="quote-slider quote-slider--dgb-yellow" data-autoplay="false" data-playing="false">
<div class="quote-slider__inner">
<div class="quote-slider__slides-wrap">
<div class="quote-slider__slides">
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">
<div class="quote-slider__source-image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Image of a human" height="160" src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" height="160" alt="Image of a human" /></div>
</div>Name Zitatgeber
</div>
</div>
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">Name Zitatgeber</div>
</div>
</div>
</div>
</div>
</div>{
"slides": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber",
"sliderImage": {
"alt": "Image of a human",
"width": 160,
"height": 160
}
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber"
}
],
"color": "dgb-yellow"
}
Dgb Orange @quote-slider--dgb-orange
<div class="quote-slider quote-slider--dgb-orange" data-autoplay="false" data-playing="false">
<div class="quote-slider__inner">
<div class="quote-slider__slides-wrap">
<div class="quote-slider__slides">
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">
<div class="quote-slider__source-image">
<div class="image loading" style="padding-top: 100%;"><noscript><img class="image__fallback" alt="Image of a human" height="160" src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" /></noscript><img class="image__img js-lazyload" data-src="https://bildermangel.de/160x160/F5F5F5/28281a.png?text=160x160" width="160" height="160" alt="Image of a human" /></div>
</div>Name Zitatgeber
</div>
</div>
<div class="quote-slider__slide">
<figure class="quote">
<blockquote class="quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote>
<figcaption class="quote__source">
<div class="quote__source-text">Maecenas varius tortor nibh, sit amet tempor nibh finibus et.</div>
</figcaption>
</figure>
<div class="quote-slider__source">Name Zitatgeber</div>
</div>
</div>
</div>
</div>
</div>{
"slides": [
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber",
"sliderImage": {
"alt": "Image of a human",
"width": 160,
"height": 160
}
},
{
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"caption": "Maecenas varius tortor nibh, sit amet tempor nibh finibus et.",
"source": "Name Zitatgeber"
}
],
"color": "dgb-orange"
}