The POI/ Outlet Carousel presents in a simple form various outlets on board the ship. The picture and text indicate what kind of outlet it is and the badge classifies a category if it is given.
This carousel is intended to quickly introduce the user to a number of POIs/outlets on board. The general information about this outlet is short and gives a quick first impression.
- filterTags: fragments:ships/aidaperla,fragments:ships/aidamar,fragments:ships/aidadiva,fragments:ships/aidaluna
- cfFolder: /content/dam/aida-component-library/demo/fragments/aida_structure
- id: news-carousel-test-id
- sling:resourceType: aida-component-library/core/components/content/outletCarousel
<div class="outletCarousel">
<div class="cmp-outletcarousel" id="news-carousel-test-id">
<div class="cmp-outletcarousel--carousel js-carousel flickity-enabled is-draggable is-loaded" data-flickity="" data-counter-label="von" data-initialized="" style="max-height: none;">
<div class="flickity-viewport" style="height: 1514.34px;">
<div class="flickity-slider" style="transform: translateX(0px);">
<div class="cmp-outletcarousel__item flickity-cell is-selected" id="poolbar" style="transform: translateX(0px);">
<div id="poolbar" class="cmp-teaser" data-initialized="">
<div class="cmp-teaser__content">
<p class="cmp-teaser__pretitle">
<span>Poolbar</span>
</p>
<h2 class="cmp-teaser__title">
<span>Poolbar</span>
</h2>
<div class="cmp-teaser__description">
<p>Auf Deck 18 finden Sie auf AIDAnova die Poolbar, in welcher Sie gemütlich Platz nehmen und die Sonne genießen können. Jetzt fehlt nur noch der Cocktail in der Hand.</p>
</div>
</div>
<div class="cmp-teaser__image">
<div data-cmp-is="wcmio-responsiveimage" data-asset="/content/dam/aida-component-library/demo/images/schiffe/rest-poolbar.jpg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/schiffe/rest-poolbar.jpg" data-title="rest-poolbar.jpg" id="poolbar-image" class="cmp-wcmio-responsiveimage " itemscope="" itemtype="http://schema.org/ImageObject">
<a class="cmp-wcmio-responsiveimage__link" data-cmp-hook-image="link" href="/content/aida-component-library/library/container/carousel/AIDA-374-CP-Outlet-Carousel-with-Badge.html">
<img src="/content/dam/aida-component-library/demo/images/schiffe/rest-poolbar.jpg/_jcr_content/renditions/original.image_file.768.576.0,1,768,577.file/rest-poolbar.jpg" alt="rest-poolbar.jpg" srcset="/content/dam/aida-component-library/demo/images/schiffe/rest-poolbar.jpg/_jcr_content/renditions/original.image_file.348.261.file/rest-poolbar.jpg 348w, /content/dam/aida-component-library/demo/images/schiffe/rest-poolbar.jpg/_jcr_content/renditions/original.image_file.384.288.file/rest-poolbar.jpg 384w" sizes="(max-width: 768px) 348px, 384px" class="cmp-wcmio-responsiveimage__image cmp-image__image" data-cmp-hook-image="image" itemprop="contentUrl" title="rest-poolbar.jpg">
</a>
<meta itemprop="caption" content="rest-poolbar.jpg">
</div>
</div>
</div>
<a id="poolbar-button" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html">
<span class="cmp-button__text">Mehr Erfahren</span>
</a>
</div>
<div class="cmp-outletcarousel__item flickity-cell" id="lanaibar" aria-hidden="true" style="transform: translateX(1264px);">
<div id="lanaibar" class="cmp-teaser" data-initialized="">
<div class="cmp-teaser__content">
<p class="cmp-teaser__pretitle">
<span>Lanai Bar</span>
</p>
<h2 class="cmp-teaser__title">
<span>Lanai Bar</span>
</h2>
<div class="cmp-teaser__description">
<p>Ausgehend vom Yachtclub Restaurant genießen Sie hier einen der schönsten Blicke aufs offene Meer. Also setzen Sie sich und sehen Sie zu, wie Ihre Sorgen verschwinden.</p>
</div>
</div>
<div class="cmp-teaser__image">
<div data-cmp-is="wcmio-responsiveimage" data-asset="/content/dam/aida-component-library/demo/images/schiffe/rest-lanairbar.jpg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/schiffe/rest-lanairbar.jpg" data-title="rest-lanairbar.jpg" id="lanaibar-image" class="cmp-wcmio-responsiveimage " itemscope="" itemtype="http://schema.org/ImageObject">
<a class="cmp-wcmio-responsiveimage__link" data-cmp-hook-image="link" href="/content/aida-component-library/library/container/carousel/AIDA-374-CP-Outlet-Carousel-with-Badge.html">
<img src="/content/dam/aida-component-library/demo/images/schiffe/rest-lanairbar.jpg/_jcr_content/renditions/original.image_file.768.576.0,1,768,577.file/rest-lanairbar.jpg" alt="rest-lanairbar.jpg" srcset="/content/dam/aida-component-library/demo/images/schiffe/rest-lanairbar.jpg/_jcr_content/renditions/original.image_file.348.261.file/rest-lanairbar.jpg 348w, /content/dam/aida-component-library/demo/images/schiffe/rest-lanairbar.jpg/_jcr_content/renditions/original.image_file.384.288.file/rest-lanairbar.jpg 384w" sizes="(max-width: 768px) 348px, 384px" class="cmp-wcmio-responsiveimage__image cmp-image__image" data-cmp-hook-image="image" itemprop="contentUrl" title="rest-lanairbar.jpg">
</a>
<meta itemprop="caption" content="rest-lanairbar.jpg">
</div>
</div>
</div>
<a id="lanaibar-button" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html">
<span class="cmp-button__text">Mehr Erfahren</span>
</a>
</div>
<div class="cmp-outletcarousel__item flickity-cell" id="thecube" aria-hidden="true" style="transform: translateX(2528px);">
<div id="thecube" class="cmp-teaser" data-initialized="">
<div class="cmp-teaser__content">
<p class="cmp-teaser__pretitle">
<span>The Cube - Lounge</span>
</p>
<h2 class="cmp-teaser__title">
<span>The Cube - Lounge</span>
</h2>
<div class="cmp-teaser__description">
<p>Ausgehend vom Yachtclub Restaurant genießen Sie hier einen der schönsten Blicke aufs offene Meer.Ausgehend vom Yachtclub Restaurant genießen Sie hier einen der schönsten Blicke aufs offene.</p>
</div>
</div>
<div class="cmp-teaser__image">
<div data-cmp-is="wcmio-responsiveimage" data-asset="/content/dam/aida-component-library/demo/images/schiffe/rest-thecube.jpg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/schiffe/rest-thecube.jpg" data-title="rest-thecube.jpg" id="thecube-image" class="cmp-wcmio-responsiveimage " itemscope="" itemtype="http://schema.org/ImageObject">
<a class="cmp-wcmio-responsiveimage__link" data-cmp-hook-image="link" href="/content/aida-component-library/library/container/carousel/AIDA-374-CP-Outlet-Carousel-with-Badge.html">
<img src="/content/dam/aida-component-library/demo/images/schiffe/rest-thecube.jpg/_jcr_content/renditions/original.image_file.768.576.0,1,768,577.file/rest-thecube.jpg" alt="rest-thecube.jpg" srcset="/content/dam/aida-component-library/demo/images/schiffe/rest-thecube.jpg/_jcr_content/renditions/original.image_file.348.261.file/rest-thecube.jpg 348w, /content/dam/aida-component-library/demo/images/schiffe/rest-thecube.jpg/_jcr_content/renditions/original.image_file.384.288.file/rest-thecube.jpg 384w" sizes="(max-width: 768px) 348px, 384px" class="cmp-wcmio-responsiveimage__image cmp-image__image" data-cmp-hook-image="image" itemprop="contentUrl" title="rest-thecube.jpg">
</a>
<meta itemprop="caption" content="rest-thecube.jpg">
</div>
</div>
</div>
<a id="thecube-button" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html">
<span class="cmp-button__text">Mehr Erfahren</span>
</a>
</div>
<div class="cmp-outletcarousel__item flickity-cell" id="eisbar" aria-hidden="true" style="transform: translateX(3792px);">
<div id="eisbar" class="cmp-teaser" data-initialized="">
<div class="cmp-teaser__content">
<p class="cmp-teaser__pretitle">
<span>Eisbar</span>
</p>
<h2 class="cmp-teaser__title">
<span>Eisbar</span>
</h2>
<div class="cmp-teaser__description">
<p>Die süßeste Verführung - nicht nur für Naschkatzen! Kreieren Sie ihr Lieblingseis: Kombinieren Sie verschiedene Eissorten mit leckeren Saucen, Früchten und mehr.</p>
</div>
</div>
<div class="cmp-teaser__image">
<div data-cmp-is="wcmio-responsiveimage" data-asset="/content/dam/aida-component-library/demo/images/schiffe/rest-eisbar.jpg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/schiffe/rest-eisbar.jpg" data-title="rest-eisbar.jpg" id="eisbar-image" class="cmp-wcmio-responsiveimage " itemscope="" itemtype="http://schema.org/ImageObject">
<a class="cmp-wcmio-responsiveimage__link" data-cmp-hook-image="link" href="/content/aida-component-library/library/container/carousel/AIDA-374-CP-Outlet-Carousel-with-Badge.html">
<img src="/content/dam/aida-component-library/demo/images/schiffe/rest-eisbar.jpg/_jcr_content/renditions/original.image_file.768.576.0,1,768,577.file/rest-eisbar.jpg" alt="rest-eisbar.jpg" srcset="/content/dam/aida-component-library/demo/images/schiffe/rest-eisbar.jpg/_jcr_content/renditions/original.image_file.348.261.file/rest-eisbar.jpg 348w, /content/dam/aida-component-library/demo/images/schiffe/rest-eisbar.jpg/_jcr_content/renditions/original.image_file.384.288.file/rest-eisbar.jpg 384w" sizes="(max-width: 768px) 348px, 384px" class="cmp-wcmio-responsiveimage__image cmp-image__image" data-cmp-hook-image="image" itemprop="contentUrl" title="rest-eisbar.jpg">
</a>
<meta itemprop="caption" content="rest-eisbar.jpg">
</div>
</div>
</div>
<a id="eisbar-button" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html">
<span class="cmp-button__text">Mehr Erfahren</span>
</a>
</div>
</div>
</div><button class="flickity-button flickity-prev-next-button previous" type="button" aria-label="Previous" disabled="true" style="left: -668px;"><svg class="flickity-button-icon" viewBox="0 0 100 100">
<title>Previous</title>
<path d="M 10, 50
L 60, 100
L 70, 90
L 30, 50
L 70, 10
L 60, 0
Z" class="arrow"></path>
</svg></button><button class="flickity-button flickity-prev-next-button next" type="button" aria-label="Next" style="right: -668px;"><svg class="flickity-button-icon" viewBox="0 0 100 100">
<title>Next</title>
<path d="M 10, 50
L 60, 100
L 70, 90
L 30, 50
L 70, 10
L 60, 0
Z" class="arrow" transform="translate(100, 100) rotate(180)"></path>
</svg></button>
<div class="flickity-page-dots"><button type="button" class="flickity-page-dot is-selected" aria-current="step">View slide 1</button><button type="button" class="flickity-page-dot">View slide 2</button><button type="button" class="flickity-page-dot">View slide 3</button><button type="button" class="flickity-page-dot">View slide 4</button></div>
<div class="cmp-carousel__items-count"><span class="cmp-carousel__items-count-current">1</span> von <span class="cmp-carousel__items-count-total">4</span></div>
</div>
</div>
</div>
Built with Core Components 2.28.0opens in a new tab.