<div class="multi-column-image-overlay">
<div class="multi-column-image-overlay__container">
<ul class="multi-column-image-overlay__list--4 is-aligned-top">
<li class="multi-column-image-overlay__list-item">
<div class="multi-column-image-overlay-slider with-autoplay " data-autoplay-duration="2000">
<div class="multi-column-image-overlay-slider__container">
<div class="multi-column-image-overlay-slider__inner-container">
<div class="multi-column-image-overlay-slider__loader is-visible">
<div class="loading-spinner">
<div class="loading-spinner__spinner--large"></div>
</div>
</div>
<div class="multi-column-image-overlay-slider__slider">
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href="https://example.com?clicked-slide=1">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay-item__effect"></div>
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img multi-column-image-overlay-item__brand-image is-loading" alt="Brand image" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/bike.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/bike.jpg 1x, /example-assets/images/multi-column-banner/bike.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="swiper-slide">
<a href="https://example.com?clicked-slide=2">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay-item__effect"></div>
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/logos/product-line-logo-square.png" class="image__img multi-column-image-overlay-item__brand-image is-loading" alt="Brand image" srcset="/example-assets/images/logos/product-line-logo-square.png 1x, /example-assets/images/logos/product-line-logo-square.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/device.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/device.jpg 1x, /example-assets/images/multi-column-banner/device.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="swiper-slide">
<a href="https://example.com?clicked-slide=3">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/bike.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/bike.jpg 1x, /example-assets/images/multi-column-banner/bike.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
</ul>
<div class="multi-column-image-overlay-slider__pagination"></div>
</div>
<div class="multi-column-image-overlay-slider__navigation-next"></div>
<div class="multi-column-image-overlay-slider__navigation-prev"></div>
</div>
</div>
</div>
</div>
</li>
<li class="multi-column-image-overlay__list-item">
<div class="multi-column-image-overlay-slider with-autoplay " data-autoplay-duration="2000">
<div class="multi-column-image-overlay-slider__container">
<div class="multi-column-image-overlay-slider__inner-container">
<div class="multi-column-image-overlay-slider__loader is-visible">
<div class="loading-spinner">
<div class="loading-spinner__spinner--large"></div>
</div>
</div>
<div class="multi-column-image-overlay-slider__slider">
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href="https://example.com?clicked-slide=1">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay-item__effect"></div>
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img multi-column-image-overlay-item__brand-image is-loading" alt="Brand image" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/bike.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/bike.jpg 1x, /example-assets/images/multi-column-banner/bike.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="swiper-slide">
<a href="https://example.com?clicked-slide=2">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/device.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/device.jpg 1x, /example-assets/images/multi-column-banner/device.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="swiper-slide">
<a href="https://example.com?clicked-slide=3">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/bike.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/bike.jpg 1x, /example-assets/images/multi-column-banner/bike.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="swiper-slide">
<a href="https://example.com?clicked-slide=4">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay-item__effect"></div>
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img multi-column-image-overlay-item__brand-image is-loading" alt="Brand image" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/bike.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/bike.jpg 1x, /example-assets/images/multi-column-banner/bike.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
</ul>
<div class="multi-column-image-overlay-slider__pagination"></div>
</div>
<div class="multi-column-image-overlay-slider__navigation-next"></div>
<div class="multi-column-image-overlay-slider__navigation-prev"></div>
</div>
</div>
</div>
</div>
</li>
<li class="multi-column-image-overlay__list-item">
<a href="https://example.com?clicked-slide=1">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay-item__effect"></div>
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img multi-column-image-overlay-item__brand-image is-loading" alt="Brand image" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/bike.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/bike.jpg 1x, /example-assets/images/multi-column-banner/bike.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="multi-column-image-overlay__list-item">
<div class="multi-column-image-overlay-slider with-autoplay " data-autoplay-duration="2000">
<div class="multi-column-image-overlay-slider__container">
<div class="multi-column-image-overlay-slider__inner-container">
<div class="multi-column-image-overlay-slider__loader is-visible">
<div class="loading-spinner">
<div class="loading-spinner__spinner--large"></div>
</div>
</div>
<div class="multi-column-image-overlay-slider__slider">
<div class="swiper">
<ul class="swiper-wrapper">
<li class="swiper-slide">
<a href="https://example.com?clicked-slide=2">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay-item__effect"></div>
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img multi-column-image-overlay-item__brand-image is-loading" alt="Brand image" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/bike.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/bike.jpg 1x, /example-assets/images/multi-column-banner/bike.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="swiper-slide">
<a href="https://example.com?clicked-slide=3">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/device.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/device.jpg 1x, /example-assets/images/multi-column-banner/device.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="swiper-slide">
<a href="https://example.com?clicked-slide=4">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/bike.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/bike.jpg 1x, /example-assets/images/multi-column-banner/bike.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
<li class="swiper-slide">
<a href="https://example.com?clicked-slide=1">
<div class="multi-column-image-overlay-item multi-column-image-overlay__column">
<div class="multi-column-image-overlay__item-container">
<div class="multi-column-image-overlay-item__effect"></div>
<div class="multi-column-image-overlay__overlay-container">
<div class="multi-column-image-overlay__overlay">
<h3 class="multi-column-image-overlay__title">Variante Gradient von links</h3>
<div class="multi-column-image-overlay__sub-title">Ideal für die dunkle Jahreszeit</div>
</div>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/logos/brand-logo.png" class="image__img multi-column-image-overlay-item__brand-image is-loading" alt="Brand image" srcset="/example-assets/images/logos/brand-logo.png 1x, /example-assets/images/logos/brand-logo.png 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
<div class="image ">
<picture>
<img src="/example-assets/images/multi-column-banner/bike.jpg" class="image__img multi-column-image-overlay__image is-loading" alt="Variante Gradient von links" srcset="/example-assets/images/multi-column-banner/bike.jpg 1x, /example-assets/images/multi-column-banner/bike.jpg 2x" onload="this.classList.remove('is-loading')" />
</picture>
</div>
</div>
</div>
</a>
</li>
</ul>
<div class="multi-column-image-overlay-slider__pagination"></div>
</div>
<div class="multi-column-image-overlay-slider__navigation-next"></div>
<div class="multi-column-image-overlay-slider__navigation-prev"></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
{% include '@SharedComponents/modules/bricks/components/multi-column-image-overlay/multi-column-image-overlay.twig' %}
{
"headingLevel": 3,
"sliders": [
{
"items": [
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=1",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/bike.jpg",
"src2x": "/example-assets/images/multi-column-banner/bike.jpg",
"alt": "Variante Gradient von links"
},
"brandImage": {
"src": "/example-assets/images/logos/brand-logo.png",
"src2x": "/example-assets/images/logos/brand-logo.png",
"alt": "Brand image"
}
},
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=2",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/device.jpg",
"src2x": "/example-assets/images/multi-column-banner/device.jpg",
"alt": "Variante Gradient von links"
},
"brandImage": {
"src": "/example-assets/images/logos/product-line-logo-square.png",
"src2x": "/example-assets/images/logos/product-line-logo-square.png",
"alt": "Brand image"
}
},
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=3",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/bike.jpg",
"src2x": "/example-assets/images/multi-column-banner/bike.jpg",
"alt": "Variante Gradient von links"
}
}
],
"autoplay": true
},
{
"items": [
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=1",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/bike.jpg",
"src2x": "/example-assets/images/multi-column-banner/bike.jpg",
"alt": "Variante Gradient von links"
},
"brandImage": {
"src": "/example-assets/images/logos/brand-logo.png",
"src2x": "/example-assets/images/logos/brand-logo.png",
"alt": "Brand image"
}
},
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=2",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/device.jpg",
"src2x": "/example-assets/images/multi-column-banner/device.jpg",
"alt": "Variante Gradient von links"
}
},
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=3",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/bike.jpg",
"src2x": "/example-assets/images/multi-column-banner/bike.jpg",
"alt": "Variante Gradient von links"
}
},
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=4",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/bike.jpg",
"src2x": "/example-assets/images/multi-column-banner/bike.jpg",
"alt": "Variante Gradient von links"
},
"brandImage": {
"src": "/example-assets/images/logos/brand-logo.png",
"src2x": "/example-assets/images/logos/brand-logo.png",
"alt": "Brand image"
}
}
],
"autoplay": true
},
{
"items": [
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=1",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/bike.jpg",
"src2x": "/example-assets/images/multi-column-banner/bike.jpg",
"alt": "Variante Gradient von links"
},
"brandImage": {
"src": "/example-assets/images/logos/brand-logo.png",
"src2x": "/example-assets/images/logos/brand-logo.png",
"alt": "Brand image"
}
}
],
"autoplay": false
},
{
"items": [
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=2",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/bike.jpg",
"src2x": "/example-assets/images/multi-column-banner/bike.jpg",
"alt": "Variante Gradient von links"
},
"brandImage": {
"src": "/example-assets/images/logos/brand-logo.png",
"src2x": "/example-assets/images/logos/brand-logo.png",
"alt": "Brand image"
}
},
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=3",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/device.jpg",
"src2x": "/example-assets/images/multi-column-banner/device.jpg",
"alt": "Variante Gradient von links"
}
},
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=4",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/bike.jpg",
"src2x": "/example-assets/images/multi-column-banner/bike.jpg",
"alt": "Variante Gradient von links"
}
},
{
"title": "Variante Gradient von links",
"href": "https://example.com?clicked-slide=1",
"subTitle": "Ideal für die dunkle Jahreszeit",
"image": {
"src": "/example-assets/images/multi-column-banner/bike.jpg",
"src2x": "/example-assets/images/multi-column-banner/bike.jpg",
"alt": "Variante Gradient von links"
},
"brandImage": {
"src": "/example-assets/images/logos/brand-logo.png",
"src2x": "/example-assets/images/logos/brand-logo.png",
"alt": "Brand image"
}
}
],
"autoplay": true
}
]
}
import './multi-column-image-overlay.scss';
import MultiColumnImageOverlay, {selector as sel} from 'cando-cx-components-library/components/modules/bricks/components/multi-column-image-overlay/multi-column-image-overlay';
export default MultiColumnImageOverlay;
export const selector = sel;
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/bricks/components/multi-column-image-overlay/multi-column-image-overlay";
No notes defined.