<div class="product-family-slider">
<div class="product-family-slider__container">
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<div class="data-sheet-image--large-container">
<div class="image ">
<picture>
<img src="/example-assets/images/product-family-slider/product-image.jpg" class="image__img data-sheet-image__image is-loading" alt="Product Test" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="product-family-slider__item-container">
<h3 class="product-family-slider__title">VESPA GTS/GTS Super</h3>
<div class="product-family-slider__button-container">
<div class="product-family-slider__price-container">
<div class="product-family-slider__price-title">UVP inkl. 7.7% MwSt.</div>
<div class="price--extra-large">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix--offer">ab</div>
<div class="price-regular__current-currency--offer">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value--offer">0.00</div>
</div>
</div>
<div class="price-regular__list-price">
<div class="price-regular__list-price-prefix">
<del>statt</del>
</div>
<div class="price-regular__list-price-inner">
<div class="price-regular__list-price-currency">
<del>CHF</del>
</div>
<div class="price-regular__list-price-value">
<del>0.00</del>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="button--primary" data-is-initialized="true">Jetzt konfigurieren</a>
</div>
<div class="product-family-slider__price-subline">Limitierte Einführungsaktion bis zum 31.05.2020</div>
</div>
<div class="data-sheet">
<div class="data-sheet__container">
<div class="data-sheet__description--large-container">
<div class="wysiwyg-content">
<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>
</div>
</div>
<dl class="data-sheet__data--large-container">
<dt class="data-sheet__data-name">Führerschein</dt>
<dd class="data-sheet__data-value">
GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A
</dd>
<dt class="data-sheet__data-name">Leistung</dt>
<dd class="data-sheet__data-value">
7.9 kW - 10.7 HP at 7,700 rpm
</dd>
<dt class="data-sheet__data-name">Farben (je nach Modell)</dt>
<dd class="data-sheet__data-value">
<div class="data-sheet__colors">
<div class="data-sheet__color" style="background-color:#d0021b"></div>
<div class="data-sheet__color" style="background-color:#f5a623"></div>
<div class="data-sheet__color" style="background-color:#333333"></div>
<div class="data-sheet__color" style="background-color:#adafb1"></div>
<div class="data-sheet__color" style="background-color:#320371"></div>
</div>
</dd>
</dl>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="data-sheet-image--large-container">
<div class="image ">
<picture>
<img src="/example-assets/images/product-family-slider/product-image.jpg" class="image__img data-sheet-image__image is-loading" alt="Product Test" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="product-family-slider__item-container">
<h3 class="product-family-slider__title">VESPA GTS/GTS Super</h3>
<div class="product-family-slider__button-container">
<div class="product-family-slider__price-container">
<div class="product-family-slider__price-title">UVP inkl. 7.7% MwSt.</div>
<div class="price--extra-large">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix">ab</div>
<div class="price-regular__current-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">0.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="button--primary" data-is-initialized="true">Jetzt konfigurieren</a>
</div>
</div>
<div class="data-sheet">
<div class="data-sheet__container">
<div class="data-sheet__description--large-container">
<div class="wysiwyg-content">
<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>
</div>
</div>
<dl class="data-sheet__data--large-container">
<dt class="data-sheet__data-name">Führerschein</dt>
<dd class="data-sheet__data-value">
GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A
</dd>
<dt class="data-sheet__data-name">Leistung</dt>
<dd class="data-sheet__data-value">
7.9 kW - 10.7 HP at 7,700 rpm
</dd>
<dt class="data-sheet__data-name">Farben (je nach Modell)</dt>
<dd class="data-sheet__data-value">
<div class="data-sheet__colors">
<div class="data-sheet__color" style="background-color:#d0021b"></div>
<div class="data-sheet__color" style="background-color:#f5a623"></div>
<div class="data-sheet__color" style="background-color:#333333"></div>
<div class="data-sheet__color" style="background-color:#adafb1"></div>
<div class="data-sheet__color" style="background-color:#320371"></div>
</div>
</dd>
</dl>
</div>
</div>
</li>
<li class="swiper-slide">
<div class="data-sheet-image--large-container">
<div class="image ">
<picture>
<img src="/example-assets/images/product-family-slider/product-image.jpg" class="image__img data-sheet-image__image is-loading" alt="Product Test" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
<div class="product-family-slider__item-container">
<h3 class="product-family-slider__title">VESPA GTS/GTS Super</h3>
<div class="product-family-slider__button-container">
<div class="product-family-slider__price-container">
<div class="product-family-slider__price-title">UVP inkl. 7.7% MwSt.</div>
<div class="price--extra-large">
<div class="price__row">
<div class="price__column--regular-price">
<div class="price-regular">
<div class="price-regular__current">
<div class="price-regular__current-price-inner">
<div class="price-regular__current-prefix">ab</div>
<div class="price-regular__current-currency">CHF</div>
</div>
<div class="price-regular__current-price-inner">
<div class="price-regular__current-value">0.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="button--primary" data-is-initialized="true">Jetzt konfigurieren</a>
</div>
</div>
<div class="data-sheet">
<div class="data-sheet__container">
<div class="data-sheet__description--large-container">
<div class="wysiwyg-content">
<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>
</div>
</div>
<dl class="data-sheet__data--large-container">
<dt class="data-sheet__data-name">Führerschein</dt>
<dd class="data-sheet__data-value">
GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A
</dd>
<dt class="data-sheet__data-name">Leistung</dt>
<dd class="data-sheet__data-value">
7.9 kW - 10.7 HP at 7,700 rpm
</dd>
<dt class="data-sheet__data-name">Farben (je nach Modell)</dt>
<dd class="data-sheet__data-value">
<div class="data-sheet__colors">
<div class="data-sheet__color" style="background-color:#d0021b"></div>
<div class="data-sheet__color" style="background-color:#f5a623"></div>
<div class="data-sheet__color" style="background-color:#333333"></div>
<div class="data-sheet__color" style="background-color:#adafb1"></div>
<div class="data-sheet__color" style="background-color:#320371"></div>
</div>
</dd>
</dl>
</div>
</div>
</li>
</ul>
</div>
<div class="product-family-slider__button-prev"></div>
<div class="product-family-slider__button-next"></div>
</div>
</div>
{% include '@SharedComponents/modules/bricks/components/product-family-slider/product-family-slider.twig' %}
{
"headingLevel": "3",
"items": [
{
"title": "VESPA GTS/GTS Super",
"button": "<a href=\"#\" class=\"button--primary\" data-is-initialized=\"true\">Jetzt konfigurieren</a>",
"priceTitle": "UVP inkl. 7.7% MwSt.",
"price": {
"variant": "extra-large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "5045.-",
"listPrice": "6095.-",
"from": true
}
},
"priceSubline": "Limitierte Einführungsaktion bis zum 31.05.2020",
"dataSheetImage": {
"variant": "large-container",
"image": {
"alt": "Product Test",
"src": "/example-assets/images/product-family-slider/product-image.jpg"
}
},
"dataSheet": {
"variant": "large-container",
"description": "<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>",
"data": [
{
"title": "Führerschein",
"value": "GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A",
"type": "text"
},
{
"title": "Leistung",
"value": "7.9 kW - 10.7 HP at 7,700 rpm",
"type": "text"
},
{
"title": "Farben (je nach Modell)",
"value": [
"#d0021b",
"#f5a623",
"#333333",
"#adafb1",
"#320371"
],
"type": "colors"
}
]
}
},
{
"title": "VESPA GTS/GTS Super",
"button": "<a href=\"#\" class=\"button--primary\" data-is-initialized=\"true\">Jetzt konfigurieren</a>",
"priceTitle": "UVP inkl. 7.7% MwSt.",
"price": {
"variant": "extra-large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "5045.-",
"from": true
}
},
"dataSheetImage": {
"variant": "large-container",
"image": {
"alt": "Product Test",
"src": "/example-assets/images/product-family-slider/product-image.jpg"
}
},
"dataSheet": {
"variant": "large-container",
"description": "<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>",
"data": [
{
"title": "Führerschein",
"value": "GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A",
"type": "text"
},
{
"title": "Leistung",
"value": "7.9 kW - 10.7 HP at 7,700 rpm",
"type": "text"
},
{
"title": "Farben (je nach Modell)",
"value": [
"#d0021b",
"#f5a623",
"#333333",
"#adafb1",
"#320371"
],
"type": "colors"
}
]
}
},
{
"title": "VESPA GTS/GTS Super",
"button": "<a href=\"#\" class=\"button--primary\" data-is-initialized=\"true\">Jetzt konfigurieren</a>",
"priceTitle": "UVP inkl. 7.7% MwSt.",
"price": {
"variant": "extra-large",
"labels": {
"from": "ab",
"instead": "statt"
},
"price": {
"currency": "CHF",
"price": "5045.-",
"from": true
}
},
"dataSheetImage": {
"variant": "large-container",
"image": {
"alt": "Product Test",
"src": "/example-assets/images/product-family-slider/product-image.jpg"
}
},
"dataSheet": {
"variant": "large-container",
"description": "<p>GTS bleibt GTS, der wahre Sportsgeist der Vespa. Vom Design her ist die sogenannte Vespone ihren grosszügigen Formen treu geblieben, im technischen Bereich hingegen hat sie kräftig aufgerüstet: Mit der neuen Vorderradaufhängung (ESS) wurden die Fahreigenschaften deutlich verbessert. Ein USB-Anschluss im Handschuhfach – ein Must in der heutigen Zeit - ermöglicht das Laden eines Smartphones oder den Anschluss eines GPS.</p>",
"data": [
{
"title": "Führerschein",
"value": "GTS 125: Klasse A1 (Nur Grundkurs, keine Prüfungspflicht)GTS 300: Klasse A",
"type": "text"
},
{
"title": "Leistung",
"value": "7.9 kW - 10.7 HP at 7,700 rpm",
"type": "text"
},
{
"title": "Farben (je nach Modell)",
"value": [
"#d0021b",
"#f5a623",
"#333333",
"#adafb1",
"#320371"
],
"type": "colors"
}
]
}
}
]
}
import './product-family-slider.scss';
import ProductFamilySlider, {selector as sel} from 'cando-cx-components-library/components/modules/bricks/components/product-family-slider/product-family-slider';
export default ProductFamilySlider;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/bricks/components/product-family-slider/product-family-slider";
No notes defined.