The homepage slider is the centrepiece and first element on the homepage. It is intended to inform about current offers, campaigns and topics and to inspire the user directly. It slides automatically and thus offers the user a highly visually appealing element. The user should feel motivated to click further and find out about things that are currently being advertised. The slider slides automatically, but the individual teasers are also clickable.
To create a new Home Carousel, you need to add at list 4 teasers. Each one should have an image (mandatory). You can add to each image the following info:
Use it in case you need it for Analytics or other purposes
The image you choose will be used for Hero teaser and for thumbnail in the navigation
Textual alternative of the meaning or function of the image, for visually impaired readers.
Title will display with a white background for clarity
A description to display as the sub-headline for the teaser.
Default text Color is black. Use this option for dark pictures
You can decide which text will be displayed in CTA. If you leave this empty, the system will use the words: "Mehr erfahren"
Use this functionality in case you want to link the teaser to an asset, like a PDF document for example.
If checked, the link will be opened in a new browser tab.
Thumbnails images usually get the title from the main image (Hero Teaser), but you can specify another title for the Thumbnail. Here you can write it.
Black Friday ab 24.11. 10:00 Uhr
Super-Deals für Deinen
Winterurlaub
Jobs bei AIDA- komm an Bord
Karriere bei AIDA
Bereit für die beste Zeit Ihres Lebens?
Westliches Mittelmeer Mediterrane Highlights
7 Tage Mittelmeer ab 699€
inkl. AIDA Sommer-Versprechen
AIDA Last Minute Reisen
11 Tage Nordeuropa ab 949€
inkl. AIDA Sommer-Versprechen
AIDA Single-Kreuzfahrten
Tage Mittelmeer ab 480€
inkl. AIDA Sommer-Versprechen
Jobs bei AIDA- komm an Bord
Westliches Mittelmeer Mediterrane Highlights
Black Friday ab 24.11. 10:00 Uhr
Cyber Week ab 28.11. 10:00 Uhr
Black Friday ab 24.11. 10:00 Uhr
- sling:resourceType: aida-component-library/core/components/content/homepageSlider
- textIsRich: true,true,true,true,true
<div class="homepageSlider">
<div class="cmp-homepage-slider" id="homepageSlider-1fbf34f9fc" data-initialized="">
<div class="cmp-homepage-slider__carousels">
<div class="cmp-homepage-slider__carousel-main flickity-enabled is-fade is-loaded" tabindex="0" style="max-height: none;">
<div class="flickity-viewport" style="height: 2925px;">
<div class="flickity-slider" style="transform: translateX(632px);">
<div class="flickity-cell is-selected" style="transform: translateX(-632px); opacity: 1;">
<div class="cmp-homepage-slider__carousel-main-item cmp-homepage-slider--pointer" data-link="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe">
<div class="cmp-homepage-slider__carousel-main-item-image">
<div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/container/carousel/AIDA-619-CP-Homepage-Slider/_jcr_content/root/responsivegrid/demo/component/homepageslider_copy.coreimg.85{.width}.jpeg/1682696640196/sample-liveshow.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/sample-liveshow.jpeg" id="image-0159d00fd5" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/dam/aida-component-library/demo/images/teasers/sample-liveshow.jpeg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="1044" height="784" alt="Asset description" title="Asset title">
<meta itemprop="caption" content="Asset title">
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-content">
<div class="cmp-homepage-slider__carousel-main-item-title">
<div id="title-0159d00fd5" class="cmp-title">
<p class="cmp-title__text ">
<span>Black Friday</span>
<span>ab 24.11. 10:00 Uhr</span>
</p>
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-info">
<div class="cmp-homepage-slider__carousel-main-item-text is-white ">
<div id="text-a904a8892f" class="cmp-text">
<p>Super-Deals für Deinen<br> Winterurlaub</p>
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-cta ">
<a id="button-a904a8892f" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html" target="_blank">
<span class="cmp-button__text">Jetzt buchen</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="flickity-cell" aria-hidden="true" style="transform: translateX(-632px); opacity: 0;">
<div class="cmp-homepage-slider__carousel-main-item cmp-homepage-slider--pointer" data-link="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe">
<div class="cmp-homepage-slider__carousel-main-item-image">
<div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/container/carousel/AIDA-619-CP-Homepage-Slider.coreimg.85{.width}.jpeg/1682696655627/sample-split-header-beach.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/sample-split-header-beach.jpg" id="image-31da59f427" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/dam/aida-component-library/demo/images/teasers/sample-split-header-beach.jpg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="1501" height="1124" alt="alt text">
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-content">
<div class="cmp-homepage-slider__carousel-main-item-title">
<div id="title-31da59f427" class="cmp-title">
<p class="cmp-title__text ">
<span>Jobs bei AIDA-</span>
<span>komm an Bord</span>
</p>
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-info">
<div class="cmp-homepage-slider__carousel-main-item-text ">
<div id="text-4b5c8c6cef" class="cmp-text">
<p>Karriere bei AIDA<br> Bereit für die beste Zeit Ihres Lebens?</p>
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-cta ">
<a id="button-4b5c8c6cef" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html" target="_blank">
<span class="cmp-button__text">Jetzt buchen</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="flickity-cell" aria-hidden="true" style="transform: translateX(-632px); opacity: 0;">
<div class="cmp-homepage-slider__carousel-main-item cmp-homepage-slider--pointer" data-link="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe">
<div class="cmp-homepage-slider__carousel-main-item-image">
<div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/container/carousel/AIDA-619-CP-Homepage-Slider.coreimg.85{.width}.png/1682696667904/sample-hero-teaser-ship-xl.png" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/Sample-Hero-Teaser-ship-xl.png" id="image-f94240638e" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/dam/aida-component-library/demo/images/teasers/Sample-Hero-Teaser-ship-xl.png" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2432" height="1370" alt="alt text">
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-content">
<div class="cmp-homepage-slider__carousel-main-item-title">
<div id="title-f94240638e" class="cmp-title">
<p class="cmp-title__text ">
<span>Westliches Mittelmeer</span>
<span>Mediterrane Highlights</span>
</p>
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-info">
<div class="cmp-homepage-slider__carousel-main-item-text is-white ">
<div id="text-be4fadc0cb" class="cmp-text">
<p>7 Tage Mittelmeer ab <span class="price">699€</span><br> inkl. AIDA Sommer-Versprechen</p>
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-cta ">
<a id="button-be4fadc0cb" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html" target="_blank">
<span class="cmp-button__text">Jetzt buchen</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="flickity-cell" aria-hidden="true" style="transform: translateX(-632px); opacity: 0;">
<div class="cmp-homepage-slider__carousel-main-item cmp-homepage-slider--pointer" data-link="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe">
<div class="cmp-homepage-slider__carousel-main-item-image">
<div data-cmp-is="image" data-cmp-src="/content/dam/aida-component-library/demo/images/teasers/prod-flugzeug.jpg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/prod-flugzeug.jpg" id="image-4a6c720fd4" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/dam/aida-component-library/demo/images/teasers/prod-flugzeug.jpg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" alt="alt text">
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-content">
<div class="cmp-homepage-slider__carousel-main-item-title">
<div id="title-4a6c720fd4" class="cmp-title">
<p class="cmp-title__text ">
<span>AIDA</span>
<span>Last Minute Reisen</span>
</p>
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-info">
<div class="cmp-homepage-slider__carousel-main-item-text ">
<div id="text-9a20c442cf" class="cmp-text">
<p>11 Tage Nordeuropa ab <span class="price">949€</span><br> inkl. AIDA Sommer-Versprechen</p>
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-cta ">
<a id="button-9a20c442cf" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html" target="_blank">
<span class="cmp-button__text">Jetzt buchen</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="flickity-cell" aria-hidden="true" style="transform: translateX(-632px); opacity: 0;">
<div class="cmp-homepage-slider__carousel-main-item cmp-homepage-slider--pointer" data-link="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe">
<div class="cmp-homepage-slider__carousel-main-item-image">
<div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/container/carousel/AIDA-619-CP-Homepage-Slider.coreimg.85{.width}.png/1693491397428/sample-hero-teaser-flugzeug-xl.png" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/Sample-Hero-Teaser-Flugzeug-xl.png" id="image-dffa07bcf8" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/dam/aida-component-library/demo/images/teasers/Sample-Hero-Teaser-Flugzeug-xl.png" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2816" height="1056" alt="alt text">
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-content">
<div class="cmp-homepage-slider__carousel-main-item-title">
<div id="title-dffa07bcf8" class="cmp-title">
<p class="cmp-title__text ">
<span>AIDA</span>
<span>Single-Kreuzfahrten</span>
</p>
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-info">
<div class="cmp-homepage-slider__carousel-main-item-text ">
<div id="text-907f127e4e" class="cmp-text">
<p>Tage Mittelmeer ab <span class="price">480€</span><br> inkl. AIDA Sommer-Versprechen</p>
</div>
</div>
<div class="cmp-homepage-slider__carousel-main-item-cta ">
<a id="button-907f127e4e" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html" target="_blank">
<span class="cmp-button__text">Jetzt buchen</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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><button type="button" class="flickity-page-dot">View slide 5</button></div>
</div>
<div class="cmp-homepage-slider__carousel-nav flickity-enabled is-draggable is-loaded" tabindex="0" style="max-height: none;">
<div class="flickity-viewport" style="height: 2164px;">
<div class="flickity-slider" style="transform: translateX(-500%);">
<div class="flickity-cell is-selected" style="transform: translateX(500%);">
<div class="cmp-homepage-slider__carousel-nav-item">
<div class="cmp-homepage-slider__carousel-nav-item-image">
<div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/container/carousel/AIDA-619-CP-Homepage-Slider.coreimg.85{.width}.jpeg/1682696655627/sample-split-header-beach.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/sample-split-header-beach.jpg" id="image-035a657b16" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/dam/aida-component-library/demo/images/teasers/sample-split-header-beach.jpg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="1501" height="1124" alt="alt text">
</div>
</div>
<div class="cmp-homepage-slider__carousel-nav-item-title">
<div id="title-035a657b16" class="cmp-title">
<p class="cmp-title__text ">
<span>Jobs bei AIDA-</span>
<span>komm an Bord</span>
</p>
</div>
</div>
</div>
</div>
<div class="flickity-cell" aria-hidden="true" style="transform: translateX(100%);">
<div class="cmp-homepage-slider__carousel-nav-item">
<div class="cmp-homepage-slider__carousel-nav-item-image">
<div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/container/carousel/AIDA-619-CP-Homepage-Slider.coreimg.85{.width}.png/1682696667904/sample-hero-teaser-ship-xl.png" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/Sample-Hero-Teaser-ship-xl.png" id="image-efb1733831" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/dam/aida-component-library/demo/images/teasers/Sample-Hero-Teaser-ship-xl.png" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2432" height="1370" alt="alt text">
</div>
</div>
<div class="cmp-homepage-slider__carousel-nav-item-title">
<div id="title-efb1733831" class="cmp-title">
<p class="cmp-title__text ">
<span>Westliches Mittelmeer</span>
<span>Mediterrane Highlights</span>
</p>
</div>
</div>
</div>
</div>
<div class="flickity-cell" aria-hidden="true" style="transform: translateX(200%);">
<div class="cmp-homepage-slider__carousel-nav-item">
<div class="cmp-homepage-slider__carousel-nav-item-image">
<div data-cmp-is="image" data-cmp-src="/content/dam/aida-component-library/demo/images/teasers/prod-flugzeug.jpg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/prod-flugzeug.jpg" id="image-7028e6b008" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/dam/aida-component-library/demo/images/teasers/prod-flugzeug.jpg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" alt="alt text">
</div>
</div>
<div class="cmp-homepage-slider__carousel-nav-item-title">
<div id="title-7028e6b008" class="cmp-title">
<p class="cmp-title__text ">
<span>Black Friday</span>
<span>ab 24.11. 10:00 Uhr</span>
</p>
</div>
</div>
</div>
</div>
<div class="flickity-cell" aria-hidden="true" style="transform: translateX(300%);">
<div class="cmp-homepage-slider__carousel-nav-item">
<div class="cmp-homepage-slider__carousel-nav-item-image">
<div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/container/carousel/AIDA-619-CP-Homepage-Slider.coreimg.85{.width}.png/1693491397428/sample-hero-teaser-flugzeug-xl.png" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/Sample-Hero-Teaser-Flugzeug-xl.png" id="image-f6e8c9132b" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/dam/aida-component-library/demo/images/teasers/Sample-Hero-Teaser-Flugzeug-xl.png" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2816" height="1056" alt="alt text">
</div>
</div>
<div class="cmp-homepage-slider__carousel-nav-item-title">
<div id="title-f6e8c9132b" class="cmp-title">
<p class="cmp-title__text ">
<span>Cyber Week</span>
<span>ab 28.11. 10:00 Uhr</span>
</p>
</div>
</div>
</div>
</div>
<div class="flickity-cell" aria-hidden="true" style="transform: translateX(400%);">
<div class="cmp-homepage-slider__carousel-nav-item">
<div class="cmp-homepage-slider__carousel-nav-item-image">
<div data-cmp-is="image" data-cmp-widths="320,480,600,800,1024,1200,1600" data-cmp-src="/content/aida-component-library/library/container/carousel/AIDA-619-CP-Homepage-Slider.coreimg.85{.width}.jpeg/1682696640196/sample-liveshow.jpeg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/sample-liveshow.jpeg" id="image-82ea0e9beb" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
<img src="/content/dam/aida-component-library/demo/images/teasers/sample-liveshow.jpeg" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="1044" height="784" alt="Asset description" title="Asset title">
<meta itemprop="caption" content="Asset title">
</div>
</div>
<div class="cmp-homepage-slider__carousel-nav-item-title">
<div id="title-82ea0e9beb" class="cmp-title">
<p class="cmp-title__text ">
<span>Black Friday</span>
<span>ab 24.11. 10:00 Uhr</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Built with Core Components 2.27.0opens in a new tab.