Marketing Experience Teaser Carousel

Short Description:

The Marketing Experience Teaser Carousel makes use of the marketing experience content fragments and thus compiles an overview for the user, which is intended to inspire, inform and whet the appetite for a vacation.

Marketing Purpose:

The Marketing Experience Carousel highlighs the different marketing experiences that are created as CF. This component can be used in different places to prepare the marketing experiences for the user and thus provide him with an emotive communication!

Page Design Example

Figma - Über Uns

opens in a new tab

Design Component

Figma - AOS (live)

opens in a new tab

Example

Tief entspat auf hoher See: Spa

Entdecken Sie die Geburtststätte der Reggae-Musik und wandeln Sie auf den Spuen von Bob Marley in Jamaika oder genießen das türkisblaue Meer und einen erfrischenden Cocktail an den schönsten Stränden dieser Welt.

3D-Rundgang starten

Tief entspat auf hoher See: Spa

3d-Rundgang starten

Im Theatrium verzaubern lassen

Das Studio X ist das erste TV-Studio auf dem Meer, in dem Shows produziert und von hier aus gesendet werden. Bis zu 500 Studiogäste können hautnah dabei sein und mitmachen, wenn Gameshows, Comedy, bekannte TV-Formate und Workshops entstehen.

3d-Rundgang starten

Im Theatrium verzaubern lassen

An Bord erwartet Sie Weltklasse Entertainment im gläsernen Theatrium und das im 360-Grad-Format. Faszinierende Bühneninszenierungen, atemberaubende Artistik, mitreißender Live-Musik, bis hin zu Spaß für Groß & Klein. Freuen Sie sich auf Urlaubsunterhaltung die einfach mitreißt und exklusiven Shows die verzaubern!

3d-Rundgang starten

1 von 4

Properties
Markup
JSON


    

    
        id:
        marketing-experience-test-id
    

    
        sling:resourceType:
        aida-component-library/core/components/content/marketingCarousel

    <div class="marketingCarousel">
  <div class="cmp-marketingcarousel" id="marketing-experience-test-id">
    <div class="cmp-marketingcarousel--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: 2899px;">
        <div class="flickity-slider" style="transform: translateX(0px);">
          <div class="cmp-marketingcarousel__item flickity-cell is-selected" id="claim_aidanova" style="transform: translateX(0px);">
            <div id="teaser-f0c0a68a41" class="cmp-teaser" data-initialized="">
              <div class="cmp-teaser__content">
                <div class="cmp-teaser__title">
                  <span>Tief entspat auf hoher See: Spa</span>
                </div>
                <div class="cmp-teaser__description">
                  <p>Entdecken Sie die Geburtststätte der Reggae-Musik und wandeln Sie auf den Spuen von Bob Marley in Jamaika oder genießen das türkisblaue Meer und einen erfrischenden Cocktail an den schönsten Stränden dieser Welt.</p>
                </div>
              </div>
              <div class="cmp-teaser__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-402-CP-Marketing-Experience-Carousel/_jcr_content/root/responsivegrid/demo/component/newscarousel_copy.coreimg.85{.width}.png/1682696644536/poi-spa.png" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/poi-spa.png" id="teaser-7fe93e3673-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                  <img src="/content/dam/aida-component-library/demo/images/teasers/poi-spa.png" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2816" height="1580" alt="">
                </div>
              </div>
            </div>
            <a id="button-7fe93e3673" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html">
              <span class="cmp-button__text">3D-Rundgang starten</span>
            </a>
          </div>
          <div class="cmp-marketingcarousel__item flickity-cell" id="-07db2211bc" aria-hidden="true" style="transform: translateX(1264px);">
            <div id="teaser-8ace161de3" class="cmp-teaser" data-initialized="">
              <div class="cmp-teaser__content">
                <div class="cmp-teaser__title">
                  <span>Tief entspat auf hoher See: Spa</span>
                </div>
                <div class="cmp-teaser__description">
                  <p>Entdecken Sie die Geburtststätte der Reggae-Musik und wandeln Sie auf den Spuen von Bob Marley in Jamaika oder genießen das türkisblaue Meer und einen erfrischenden Cocktail an den schönsten Stränden dieser Welt.</p>
                </div>
              </div>
              <div class="cmp-teaser__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-402-CP-Marketing-Experience-Carousel.coreimg.85{.width}.png/1682696671173/poi-sonnedeck.png" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/poi-sonnedeck.png" id="teaser-8d0706302b-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                  <img src="/content/dam/aida-component-library/demo/images/teasers/poi-sonnedeck.png" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2816" height="1580" alt="">
                </div>
              </div>
            </div>
            <a id="button-8d0706302b" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html">
              <span class="cmp-button__text">3d-Rundgang starten</span>
            </a>
          </div>
          <div class="cmp-marketingcarousel__item flickity-cell" id="-ca6a84103f" aria-hidden="true" style="transform: translateX(2528px);">
            <div id="teaser-411d0d7d6d" class="cmp-teaser" data-initialized="">
              <div class="cmp-teaser__content">
                <div class="cmp-teaser__title">
                  <span>Im Theatrium verzaubern lassen</span>
                </div>
                <div class="cmp-teaser__description">
                  <p>Das Studio X ist das erste TV-Studio auf dem Meer, in dem Shows produziert und von hier aus gesendet werden. Bis zu 500 Studiogäste können hautnah dabei sein und mitmachen, wenn Gameshows, Comedy, bekannte TV-Formate und Workshops entstehen.</p>
                </div>
              </div>
              <div class="cmp-teaser__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-402-CP-Marketing-Experience-Carousel.coreimg.85{.width}.png/1682696640125/poi-theatrium.png" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/poi-theatrium.png" id="teaser-32757af25f-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                  <img src="/content/dam/aida-component-library/demo/images/teasers/poi-theatrium.png" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2816" height="1580" alt="">
                </div>
              </div>
            </div>
            <a id="button-32757af25f" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html">
              <span class="cmp-button__text">3d-Rundgang starten</span>
            </a>
          </div>
          <div class="cmp-marketingcarousel__item flickity-cell" id="demo-nova-4" aria-hidden="true" style="transform: translateX(3792px);">
            <div id="teaser-bd6919d2ec" class="cmp-teaser" data-initialized="">
              <div class="cmp-teaser__content">
                <div class="cmp-teaser__title">
                  <span>Im Theatrium verzaubern lassen</span>
                </div>
                <div class="cmp-teaser__description">
                  <p>An Bord erwartet Sie Weltklasse Entertainment im gläsernen Theatrium und das im 360-Grad-Format. Faszinierende Bühneninszenierungen, atemberaubende Artistik, mitreißender Live-Musik, bis hin zu Spaß für Groß &amp; Klein. Freuen Sie sich auf Urlaubsunterhaltung die einfach mitreißt und&nbsp;exklusiven Shows die verzaubern!</p>
                </div>
              </div>
              <div class="cmp-teaser__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-402-CP-Marketing-Experience-Carousel.coreimg.85{.width}.png/1682696651927/poi-theatrium2.png" data-cmp-filereference="/content/dam/aida-component-library/demo/images/teasers/poi-theatrium2.png" id="teaser-6c40ba365a-image" data-cmp-hook-image="imageV3" class="cmp-image" itemscope="" itemtype="http://schema.org/ImageObject">
                  <img src="/content/dam/aida-component-library/demo/images/teasers/poi-theatrium2.png" loading="lazy" class="cmp-image__image" itemprop="contentUrl" width="2816" height="1580" alt="">
                </div>
              </div>
            </div>
            <a id="button-6c40ba365a" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html">
              <span class="cmp-button__text">3d-Rundgang starten</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>

myAIDA

Careers

Page Authoring

Navigation

Containers

Utilities

Marketing Experience Teaser Carousel

Short Description:

Marketing Purpose:

Page Design Example

Design Component

Example