News Carousel

Description:

The News Carousel is a teaser carousel that displays chronologically sorted news. These can be controlled by tags in the CF either filtered or appear unfiltered.

Marketing purpose:

The news carousel highlights the different news that is created as CF. On the ships page, these are played out ship-specifically, to prepare all news around a certain ship for the user.

Schiffe

Figma - AOS (live)

Example

12.09.2022

Shopaholics auf hoher See

Mehr Erfahren opens in a new tab

13.08.2022

Lichtgruß von AIDAnova

News 3

Mehr erfahren opens in a new tab

12.08.2022

Blauer Engel für AIDAnova

News 2

Mehr erfahren opens in a new tab

11.08.2022

Blauer Engel für AIDAnova

News 1

button label opens in a new tab

1 von 4

Properties
Markup
JSON


    

    
        filterTags:
        fragments:ships/aidanova
    

    
        cfFolder:
        /content/dam/aida-component-library/demo/fragments/aida_structure/news
    

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

    <div class="newsCarousel">
  <div class="cmp-newscarousel" id="newsCarousel-85dee648a3">
    <div class="cmp-newscarousel--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: 1383.34px;">
        <div class="flickity-slider" style="transform: translateX(0px);">
          <div class="cmp-newscarousel__item flickity-cell is-selected" style="transform: translateX(0px);">
            <div id="news4" class="cmp-teaser" data-initialized="">
              <div class="cmp-teaser__content">
                <p class="cmp-teaser__pretitle">
                  <span>12.09.2022</span>
                </p>
                <h2 class="cmp-teaser__title">
                  <span>Shopaholics auf hoher See</span>
                </h2>
                <div class="cmp-teaser__description">Shopaholics auf hoher See</div>
              </div>
              <div class="cmp-teaser__image">
                <div data-cmp-is="wcmio-responsiveimage" data-asset="/content/dam/aida-component-library/demo/images/schiffe/news-4.jpg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/schiffe/news-4.jpg" data-title="news-4.jpg" id="news4-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-373-CP-News-Carousel.html">
                    <img src="/content/dam/aida-component-library/demo/images/schiffe/news-4.jpg/_jcr_content/renditions/original.image_file.768.576.0,0,768,576.file/news-4.jpg" alt="news-4.jpg" srcset="/content/dam/aida-component-library/demo/images/schiffe/news-4.jpg/_jcr_content/renditions/original.image_file.348.261.file/news-4.jpg 348w, /content/dam/aida-component-library/demo/images/schiffe/news-4.jpg/_jcr_content/renditions/original.image_file.384.288.file/news-4.jpg 384w" sizes="(max-width: 768px) 348px, 384px" class="cmp-wcmio-responsiveimage__image cmp-image__image" data-cmp-hook-image="image" itemprop="contentUrl" title="news-4.jpg">
                  </a>
                  <meta itemprop="caption" content="news-4.jpg">
                </div>
              </div>
            </div>
            <a id="news4-button" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html" target="_blank">
              <span class="cmp-button__text">Mehr Erfahren</span>
            </a>
          </div>
          <div class="cmp-newscarousel__item flickity-cell" aria-hidden="true" style="transform: translateX(1264px);">
            <div id="News 3" class="cmp-teaser" data-initialized="">
              <div class="cmp-teaser__content">
                <p class="cmp-teaser__pretitle">
                  <span>13.08.2022</span>
                </p>
                <h2 class="cmp-teaser__title">
                  <span>Lichtgruß von AIDAnova</span>
                </h2>
                <div class="cmp-teaser__description">News 3</div>
              </div>
              <div class="cmp-teaser__image">
                <div data-cmp-is="wcmio-responsiveimage" data-asset="/content/dam/aida-component-library/demo/images/schiffe/news-3.jpg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/schiffe/news-3.jpg" data-title="news-3.jpg" id="News-3-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-373-CP-News-Carousel.html">
                    <img src="/content/dam/aida-component-library/demo/images/schiffe/news-3.jpg/_jcr_content/renditions/original.image_file.768.576.0,0,768,576.file/news-3.jpg" alt="news-3.jpg" srcset="/content/dam/aida-component-library/demo/images/schiffe/news-3.jpg/_jcr_content/renditions/original.image_file.348.261.file/news-3.jpg 348w, /content/dam/aida-component-library/demo/images/schiffe/news-3.jpg/_jcr_content/renditions/original.image_file.384.288.file/news-3.jpg 384w" sizes="(max-width: 768px) 348px, 384px" class="cmp-wcmio-responsiveimage__image cmp-image__image" data-cmp-hook-image="image" itemprop="contentUrl" title="news-3.jpg">
                  </a>
                  <meta itemprop="caption" content="news-3.jpg">
                </div>
              </div>
            </div>
            <a id="News-3-button" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html" target="_blank">
              <span class="cmp-button__text">Mehr erfahren</span>
            </a>
          </div>
          <div class="cmp-newscarousel__item flickity-cell" aria-hidden="true" style="transform: translateX(2528px);">
            <div id="News 2" class="cmp-teaser" data-initialized="">
              <div class="cmp-teaser__content">
                <p class="cmp-teaser__pretitle">
                  <span>12.08.2022</span>
                </p>
                <h2 class="cmp-teaser__title">
                  <span>Blauer Engel für AIDAnova</span>
                </h2>
                <div class="cmp-teaser__description">News 2</div>
              </div>
              <div class="cmp-teaser__image">
                <div data-cmp-is="wcmio-responsiveimage" data-asset="/content/dam/aida-component-library/demo/images/schiffe/news-2.jpg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/schiffe/news-2.jpg" data-title="news-2.jpg" id="News-2-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-373-CP-News-Carousel.html">
                    <img src="/content/dam/aida-component-library/demo/images/schiffe/news-2.jpg/_jcr_content/renditions/original.image_file.768.576.0,0,768,576.file/news-2.jpg" alt="news-2.jpg" srcset="/content/dam/aida-component-library/demo/images/schiffe/news-2.jpg/_jcr_content/renditions/original.image_file.348.261.file/news-2.jpg 348w, /content/dam/aida-component-library/demo/images/schiffe/news-2.jpg/_jcr_content/renditions/original.image_file.384.288.file/news-2.jpg 384w" sizes="(max-width: 768px) 348px, 384px" class="cmp-wcmio-responsiveimage__image cmp-image__image" data-cmp-hook-image="image" itemprop="contentUrl" title="news-2.jpg">
                  </a>
                  <meta itemprop="caption" content="news-2.jpg">
                </div>
              </div>
            </div>
            <a id="News-2-button" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html" target="_blank">
              <span class="cmp-button__text">Mehr erfahren</span>
            </a>
          </div>
          <div class="cmp-newscarousel__item flickity-cell" aria-hidden="true" style="transform: translateX(3792px);">
            <div id="News 1" class="cmp-teaser" data-initialized="">
              <div class="cmp-teaser__content">
                <p class="cmp-teaser__pretitle">
                  <span>11.08.2022</span>
                </p>
                <h2 class="cmp-teaser__title">
                  <span>Blauer Engel für AIDAnova</span>
                </h2>
                <div class="cmp-teaser__description">News 1</div>
              </div>
              <div class="cmp-teaser__image">
                <div data-cmp-is="wcmio-responsiveimage" data-asset="/content/dam/aida-component-library/demo/images/schiffe/news-1.jpg" data-cmp-filereference="/content/dam/aida-component-library/demo/images/schiffe/news-1.jpg" data-title="news-1.jpg" id="News-1-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-373-CP-News-Carousel.html">
                    <img src="/content/dam/aida-component-library/demo/images/schiffe/news-1.jpg/_jcr_content/renditions/original.image_file.768.576.0,0,768,576.file/news-1.jpg" alt="news-1.jpg" srcset="/content/dam/aida-component-library/demo/images/schiffe/news-1.jpg/_jcr_content/renditions/original.image_file.348.261.file/news-1.jpg 348w, /content/dam/aida-component-library/demo/images/schiffe/news-1.jpg/_jcr_content/renditions/original.image_file.384.288.file/news-1.jpg 384w" sizes="(max-width: 768px) 348px, 384px" class="cmp-wcmio-responsiveimage__image cmp-image__image" data-cmp-hook-image="image" itemprop="contentUrl" title="news-1.jpg">
                  </a>
                  <meta itemprop="caption" content="news-1.jpg">
                </div>
              </div>
            </div>
            <a id="News-1-button" class="cmp-button" href="/content/aida-component-library/demo-pages/pages/AIDA-387-SP-AIDA-Schiffe.html" target="_blank">
              <span class="cmp-button__text">button label</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

News Carousel

Description:

Marketing purpose:

Example

Shopaholics auf hoher See