<!-- Default -->
<div class="image-carousel js-image-carousel">
    <div class="image-carousel__content">
        <div class="image-carousel__stage">
            <div class="image-carousel__inner">
                <div class="image-carousel__items">
                    <div class="image-carousel__item">
                        <a class="image-carousel__item-link" href="https://example.org"><img class="image-carousel__image" src="/images/dummy/dummy-certificate-1.jpg" width="150" height="150" /></a>
                    </div>
                    <div class="image-carousel__item">
                        <a class="image-carousel__item-link" href="https://example.org"><img class="image-carousel__image" src="/images/dummy/dummy-certificate-2.jpg" width="305" height="150" /></a>
                    </div>
                    <div class="image-carousel__item">
                        <a class="image-carousel__item-link" href="https://example.org"><img class="image-carousel__image" src="/images/dummy/dummy-certificate-3.jpg" width="200" height="150" /></a>
                    </div>
                    <div class="image-carousel__item">
                        <a class="image-carousel__item-link" href="https://example.org"><img class="image-carousel__image" src="/images/dummy/dummy-certificate-4.jpg" width="298" height="150" /></a>
                    </div>
                    <div class="image-carousel__item">
                        <a class="image-carousel__item-link" href="https://example.org"><img class="image-carousel__image" src="/images/dummy/dummy-certificate-5.jpg" width="150" height="150" /></a>
                    </div>
                    <div class="image-carousel__item">
                        <a class="image-carousel__item-link" href="https://example.org"><img class="image-carousel__image" src="/images/dummy/dummy-certificate-6.png" width="150" height="150" /></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="image-carousel__more"><a class="teaser-link" href=""><span class="teaser-link__inner">Alle zeigen</span>
<svg class="icon icon--arrow-right" id="icon-b88b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>

<!-- Image Carousel Link -->
<div class="image-carousel js-image-carousel image-carousel--link">
    <div class="image-carousel__text">
        <div class="formatted-text">
            <p>Mehrfach ausgezeichnet — die hkk steht für <strong>hohe Kundenzufriedenheit,</strong> einen äußerst <strong>niedrigen Beitrag</strong> und Zusatzleistungen im Wert von <strong>über 1.000 € pro Jahr</strong></p>
        </div>
    </div>
    <div class="image-carousel__content">
        <div class="image-carousel__stage">
            <div class="image-carousel__inner">
                <div class="image-carousel__items">
                    <div class="image-carousel__item">
                        <a class="image-carousel__item-link" href="#"><img class="image-carousel__image" src="/images/dummy/dummy-badge-1.png" /></a>
                    </div>
                    <div class="image-carousel__item">
                        <a class="image-carousel__item-link" href="#"><img class="image-carousel__image" src="/images/dummy/dummy-badge-2.png" /></a>
                    </div>
                    <div class="image-carousel__item">
                        <a class="image-carousel__item-link" href="#"><img class="image-carousel__image" src="/images/dummy/dummy-badge-3.png" /></a>
                    </div>
                    <div class="image-carousel__item">
                        <a class="image-carousel__item-link" href="#"><img class="image-carousel__image" src="/images/dummy/dummy-badge-4.png" /></a>
                    </div>
                    <div class="image-carousel__item">
                        <a class="image-carousel__item-link" href="#"><img class="image-carousel__image" src="/images/dummy/dummy-badge-5.png" /></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="image-carousel__more"><a class="teaser-link" href=""><span class="teaser-link__inner">Mehr Auszeichnungen anzeigen</span>
<svg class="icon icon--arrow-right" id="icon-ce74" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- badge links
  if (links) attr.class.push('image-carousel--link');

//- Render image carousel
.image-carousel.js-image-carousel&attributes(attr)
  if badgeText
    .image-carousel__text
      != include('@formatted-text', badgeText)

  .image-carousel__content
    .image-carousel__stage
      .image-carousel__inner
        //- Images
        if images
          .image-carousel__items
            each image in images
              .image-carousel__item
                a.image-carousel__item-link(href=image.link)
                  img.image-carousel__image&attributes(image.attr)(src=image.src)

    //- More link
    if more
      .image-carousel__more
        != include('@teaser-link', { text: more })
/* Default */
{
  "more": "Alle zeigen",
  "images": [
    {
      "link": "https://example.org",
      "src": "/images/dummy/dummy-certificate-1.jpg",
      "attr": {
        "width": 150,
        "height": 150
      }
    },
    {
      "link": "https://example.org",
      "src": "/images/dummy/dummy-certificate-2.jpg",
      "attr": {
        "width": 305,
        "height": 150
      }
    },
    {
      "link": "https://example.org",
      "src": "/images/dummy/dummy-certificate-3.jpg",
      "attr": {
        "width": 200,
        "height": 150
      }
    },
    {
      "link": "https://example.org",
      "src": "/images/dummy/dummy-certificate-4.jpg",
      "attr": {
        "width": 298,
        "height": 150
      }
    },
    {
      "link": "https://example.org",
      "src": "/images/dummy/dummy-certificate-5.jpg",
      "attr": {
        "width": 150,
        "height": 150
      }
    },
    {
      "link": "https://example.org",
      "src": "/images/dummy/dummy-certificate-6.png",
      "attr": {
        "width": 150,
        "height": 150
      }
    }
  ]
}

/* Image Carousel Link */
{
  "more": "Mehr Auszeichnungen anzeigen",
  "images": [
    {
      "link": "#",
      "src": "/images/dummy/dummy-badge-1.png"
    },
    {
      "link": "#",
      "src": "/images/dummy/dummy-badge-2.png"
    },
    {
      "link": "#",
      "src": "/images/dummy/dummy-badge-3.png"
    },
    {
      "link": "#",
      "src": "/images/dummy/dummy-badge-4.png"
    },
    {
      "link": "#",
      "src": "/images/dummy/dummy-badge-5.png"
    }
  ],
  "links": true,
  "badgeText": {
    "content": "p Mehrfach ausgezeichnet — die hkk steht für #[strong hohe Kundenzufriedenheit,] einen äußerst #[strong niedrigen Beitrag] und Zusatzleistungen im Wert von #[strong über 1.000 € pro Jahr]\n"
  }
}

  • Content:
    import h from 'hyperscript';
    import { lory } from 'lory.js';
    
    import icon from '../../../javascripts/utils/icon';
    
    const createImagesLoadedPromise = $images =>
      Promise.all(
        $images.map($image => (
          new Promise(
            (resolve) => {
              if ($image.complete && $image.naturalWidth) {
                resolve();
    
                return;
              }
    
              $image.addEventListener('load', resolve);
              $image.addEventListener('error', resolve);
            }
          )
        ))
      );
    
    const initCarousel = ($el) => {
      const $inner = $el.querySelector('.image-carousel__inner');
      const $stage = $el.querySelector('.image-carousel__stage');
    
      const $images = $inner.querySelectorAll('img');
      const imagesLoadedPromise = createImagesLoadedPromise($images);
    
      const $prevControl = h('.image-carousel__control.image-carousel__control--prev.image-carousel__control--disabled',
        h(
          'button.image-carousel__control-button',
          icon({ icon: 'arrow-thin-left' }),
        ),
      );
      const $nextControl = h('.image-carousel__control.image-carousel__control--next',
        h(
          'button.image-carousel__control-button',
          icon({ icon: 'arrow-thin-right' }),
        ),
      );
      $inner.appendChild($prevControl);
      $inner.appendChild($nextControl);
    
      const carousel = lory($stage, {
        rewind: true,
        classNameFrame: 'image-carousel__inner',
        classNameSlideContainer: 'image-carousel__items',
        classNamePrevCtrl: 'image-carousel__control--prev',
        classNameNextCtrl: 'image-carousel__control--next',
        classNameDisabledPrevCtrl: 'image-carousel__control--disabled',
        classNameDisabledNextCtrl: 'image-carousel__control--disabled',
      });
    
      imagesLoadedPromise.then(
        () => {
          carousel.setup();
        }
      );
    };
    
    document.querySelectorAll('.js-image-carousel').forEach(initCarousel);
    
  • URL: /components/raw/image-carousel/image-carousel.js
  • Filesystem Path: src/components/organisms/image-carousel/image-carousel.js
  • Size: 1.8 KB
  • Content:
    .image-carousel {
      background-color: #fff;
    }
    
    .image-carousel__stage {
      overflow: hidden;
      position: relative;
    }
    
    .image-carousel__items {
      display: flex;
    }
    
    .image-carousel__item {
      flex-grow: 0;
      flex-shrink: 0;
    }
    
    .image-carousel__image {
      height: 80px;
      width: auto;
    
      @include mq($from: m) {
        height: 110px;
      }
    
      @include mq($from: l) {
        height: 140px;
      }
    }
    
    .image-carousel__control {
      bottom: 0;
      opacity: 1;
      pointer-events: none;
      position: absolute;
      top: 0;
      transition: opacity $default-transition-duration;
      width: 3rem;
    
      &--prev {
        background: linear-gradient(to right, #fff 0%, #fff 2.5rem, rgba(#fff, 0) 100%);
        left: 0;
      }
    
      &--next {
        background: linear-gradient(to left, #fff 0%, #fff 2.5rem, rgba(#fff, 0) 100%);
        right: 0;
      }
    
      &--disabled {
        opacity: 0;
      }
    }
    
    .image-carousel__control-button {
      color: $color-steelgrey-dark;
      cursor: pointer;
      display: inline-block;
      font-size: 2rem;
      height: 2.5rem;
      pointer-events: auto;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      transition: color $default-transition-duration;
      width: 2.5rem;
    
      &:hover {
        color: $color-steelgrey-xdark;
      }
    
      .image-carousel__control--prev & {
        left: 0;
      }
    
      .image-carousel__control--next & {
        right: 0;
      }
    
      > * {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    
    .image-carousel__more {
      margin-top: 2rem;
    }
    
    @include mq($until: l) {
      .image-carousel__stage {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
      }
    
      .image-carousel__item {
        padding-left: 1rem;
        padding-right: 2.5rem;
    
        &:first-child {
          padding-left: 0;
        }
    
        &:last-child {
          padding-right: 1rem;
        }
      }
    
      .image-carousel__control {
        width: 3.5rem;
      }
    
      .image-carousel__more {
        margin-left: 2.5rem;
        margin-right: 2.5rem;
      }
    }
    
    @include mq($from: l) {
      .image-carousel__stage {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
      }
    
      .image-carousel__item {
        padding-left: 0;
    
        &:not(:last-child) {
          padding-right: 7rem;
        }
      }
    
      .image-carousel__control {
        width: 3.5rem;
      }
    
      .image-carousel__more {
        margin-left: 3.5rem;
        margin-right: 3.5rem;
      }
    }
    
    @include mq($from: xl) {
      .image-carousel__stage {
        padding-left: 4.5rem;
        padding-right: 4.5rem;
      }
    
      .image-carousel__item {
        padding-left: 0;
    
        &:not(:last-child) {
          padding-right: 9rem;
        }
      }
    
      .image-carousel__control {
        width: 4.5rem;
      }
    
      .image-carousel__more {
        margin-left: 4.5rem;
        margin-right: 4.5rem;
      }
    }
    
    
    .image-carousel--link {
      background-color: $color-sand-xlight;
      padding-bottom: 6.5rem;
      padding-top: 3.5rem;
    
      @include mq($from: m) {
        padding-bottom: 6rem;
        padding-top: 6rem;
      }
    
      @include mq($from: l) {
        padding-bottom: 8rem;
        padding-top: 8rem;
      }
    
      @include mq($from: xl) {
        padding-bottom: 5rem;
        padding-top: 10rem;
      }
    
      .image-carousel__items {
        align-items: center;
      }
    
      .image-row__item {
        flex-basis: auto;
      }
    
      .image-carousel__item:not(:last-child) {
        padding-right: 2rem;
    
        @include mq($from: l) {
          padding-right: 6rem;
        }
    
        @include mq($from: xl) {
          padding-right: 8rem;
        }
      }
    
      .image-carousel__item .image-carousel__image {
        height: auto;
        max-height: 7.5rem;
    
        @include mq($from: l) {
          max-height: 10rem;
        }
      }
    
      .image-carousel__more {
        margin-top: 4rem;
        min-width: 0.1rem;
        padding-left: 2rem;
        text-align: center;
    
        @include mq($from: m) {
          margin: 0;
          max-width: 23rem;
        }
    
        @include mq($from: l) {
          padding-left: 3rem;
        }
      }
    
      .image-carousel__content {
        margin: 0 auto;
        max-width: 114rem;
        @include mq($from: m) {
          align-items: center;
          display: flex;
          justify-content: center;
          padding: 0 1rem;
        }
      }
    
      .image-carousel__control {
        display: none;
    
        @include mq($from: m) {
          display: inline-block;
        }
      }
    
      .image-carousel__control--prev {
        background: linear-gradient(to right, $color-sand-xlight 0%, $color-sand-xlight 2.5rem, rgba($color-sand-xlight, 0) 100%);
      }
    
      .image-carousel__control--next {
        background: linear-gradient(to left, $color-sand-xlight 0%, $color-sand-xlight 2.5rem, rgba($color-sand-xlight, 0) 100%);
      }
    
      .image-carousel__more .icon {
        font-size: 1.3rem;
      }
    }
    
    .image-carousel__text {
      .formatted-text {
        margin: 0 auto 5rem;
        max-width: 91rem;
        padding-left: 3rem;
        padding-right: 3rem;
        text-align: center;
        width: 100%;
    
        @include mq($from: l) {
          margin-bottom: 5.5rem;
          padding-left: 0;
          padding-right: 0;
        }
      }
    }
    
    .overview-page__image-carousel--link {
      .overview-page__container {
        max-width: 119rem;
        padding-left: 0;
        padding-right: 0;
      }
    
      .image-carousel--link {
        @include mq($from: m) {
          padding-top: 10rem;
        }
      }
    
      .image-carousel__content {
        max-width: 108rem;
    
        @include mq($from: m) {
          padding-left: 2rem;
          padding-right: 2rem;
        }
      }
    
      @include mq($from: m) {
        margin-top: -5.5rem;
      }
    }
    
  • URL: /components/raw/image-carousel/image-carousel.scss
  • Filesystem Path: src/components/organisms/image-carousel/image-carousel.scss
  • Size: 5.1 KB

There are no notes for this item.