<section class="magazin-slider">
    <div class="magazin-slider__inner">
        <header class="magazin-slider__header">
            <h2 class="headline headline--display-2">Aus unserem Magazin
            </h2><img class="magazin-slider__logo" src="../../../../images/logo-magazin.svg" alt="Logo vom hkk Magazin" />
        </header>
        <div class="magazin-slider__slides">
            <div class="magazin-slider__slide">
                <div class="teaser teaser--magazin">
                    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                    </div>
                    <div class="teaser__inner">
                        <div class="teaser__headline">
                            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span>
                                </span>Das ist eine Teaser-Überschrift
                            </h3>
                        </div>
                        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-diagonal" id="icon-c28c" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></use>
</svg></a>
                        </div>
                    </div>
                    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
            </div>
            <div class="magazin-slider__slide">
                <div class="teaser teaser--magazin">
                    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                    </div>
                    <div class="teaser__inner">
                        <div class="teaser__headline">
                            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span>
                                </span>Das ist eine Teaser-Überschrift
                            </h3>
                        </div>
                        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-diagonal" id="icon-0ff8" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></use>
</svg></a>
                        </div>
                    </div>
                    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
            </div>
            <div class="magazin-slider__slide">
                <div class="teaser teaser--magazin">
                    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                    </div>
                    <div class="teaser__inner">
                        <div class="teaser__headline">
                            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span>
                                </span>Das ist eine Teaser-Überschrift
                            </h3>
                        </div>
                        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-diagonal" id="icon-dd92" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></use>
</svg></a>
                        </div>
                    </div>
                    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
            </div>
            <div class="magazin-slider__slide">
                <div class="teaser teaser--magazin">
                    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                    </div>
                    <div class="teaser__inner">
                        <div class="teaser__headline">
                            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span>
                                </span>Das ist eine Teaser-Überschrift
                            </h3>
                        </div>
                        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-diagonal" id="icon-247a" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></use>
</svg></a>
                        </div>
                    </div>
                    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
            </div>
            <div class="magazin-slider__slide">
                <div class="teaser teaser--magazin">
                    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                    </div>
                    <div class="teaser__inner">
                        <div class="teaser__headline">
                            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span>
                                </span>Das ist eine Teaser-Überschrift
                            </h3>
                        </div>
                        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-diagonal" id="icon-9642" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></use>
</svg></a>
                        </div>
                    </div>
                    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
            </div>
            <div class="magazin-slider__slide">
                <div class="teaser teaser--magazin">
                    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                    </div>
                    <div class="teaser__inner">
                        <div class="teaser__headline">
                            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span>
                                </span>Das ist eine Teaser-Überschrift
                            </h3>
                        </div>
                        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-diagonal" id="icon-1e22" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></use>
</svg></a>
                        </div>
                    </div>
                    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
            </div>
            <div class="magazin-slider__slide">
                <div class="teaser teaser--magazin">
                    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                    </div>
                    <div class="teaser__inner">
                        <div class="teaser__headline">
                            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span>
                                </span>Das ist eine Teaser-Überschrift
                            </h3>
                        </div>
                        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-diagonal" id="icon-60bf" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></use>
</svg></a>
                        </div>
                    </div>
                    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
            </div>
            <div class="magazin-slider__slide">
                <div class="teaser teaser--magazin">
                    <div class="teaser__image"><img class="image" alt="Alt Text sieht anders aus" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                    </div>
                    <div class="teaser__inner">
                        <div class="teaser__headline">
                            <h3 class="headline headline--headline-1"><span class="headline__kicker"><span class="headline__kicker-text">Dachzeile<span class="u-hidden-visually">: </span></span>
                                </span>Das ist eine Teaser-Überschrift
                            </h3>
                        </div>
                        <div class="teaser__more"><a class="teaser-link" href="#"><span class="teaser-link__inner">Mehr erfahren<span class='u-hidden-visually'> zu "Das ist eine Teaser-Überschrift"</span></span>
<svg class="icon icon--arrow-diagonal" id="icon-9032" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></use>
</svg></a>
                        </div>
                    </div>
                    <a class="teaser__overlay-link" href="#" tabindex="-1" aria-hidden="true"></a>
                </div>
            </div>
        </div>
        <div class="magazin-slider__controls">
            <div class="magazin-slider__prev">
                <button class="icon-button magazin-slider__control icon-button--blue" id="icon-button-7964" type="button">
<svg class="icon icon--chevron-left" id="icon-49cb" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-49cb">
  <title id="title-icon-49cb">Previous slide</title>
  <use xlink:href="#icon-chevron-left"></use>
</svg>
</button>
            </div>
            <div class="magazin-slider__next">
                <button class="icon-button magazin-slider__control icon-button--blue" id="icon-button-d4c6" type="button">
<svg class="icon icon--chevron-right" id="icon-1ae9" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-1ae9">
  <title id="title-icon-1ae9">Next slide</title>
  <use xlink:href="#icon-chevron-right"></use>
</svg>
</button>
            </div>
        </div>
        <div class="magazin-slider__button">
            <button class="button button--blue button--outline" id="button-ac91" type="button">Das ist ein Button.
<svg class="icon button__icon button__icon--after icon--arrow-diagonal" id="icon-d36b" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-diagonal"></use>
</svg>
</button>
        </div>
    </div>
</section>
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- Tag
  tag = tag ? tag : 'section';

//- Render slider
#{tag}.magazin-slider&attributes(attr): .magazin-slider__inner
  header.magazin-slider__header
    != include('@headline--display-2', headline)

    img.magazin-slider__logo(src=`${relativeRoot}images/logo-magazin.svg`, alt='Logo vom hkk Magazin')

  //- Slides
  .magazin-slider__slides
    if slides
      each slide in slides
        .magazin-slider__slide
          != include(`@${slide.use}`)

  .magazin-slider__controls
    //- Previous slide
    .magazin-slider__prev
      != include('@icon-button--blue', { attr: { class: 'magazin-slider__control' }, icon: 'chevron-left', title: 'Previous slide' })

    //- Next slide
    .magazin-slider__next
      != include('@icon-button--blue', { attr: { class: 'magazin-slider__control' }, icon: 'chevron-right', title: 'Next slide' })

  .magazin-slider__button
    != include('@button--blue-outline-icon-after')
{
  "headline": {
    "text": "Aus unserem Magazin",
    "level": 2
  },
  "tag": "section",
  "slides": [
    {
      "use": "teaser--magazin"
    },
    {
      "use": "teaser--magazin"
    },
    {
      "use": "teaser--magazin"
    },
    {
      "use": "teaser--magazin"
    },
    {
      "use": "teaser--magazin"
    },
    {
      "use": "teaser--magazin"
    },
    {
      "use": "teaser--magazin"
    },
    {
      "use": "teaser--magazin"
    }
  ]
}
  • Content:
    import { lory } from 'lory.js';
    import { BREAKPOINTS } from '../../../javascripts/constants';
    
    const mql = [
      window.matchMedia(`(min-width: ${BREAKPOINTS.m})`),
      window.matchMedia(`(min-width: ${BREAKPOINTS.l})`),
    ];
    
    class MagazinSlider {
      constructor($el) {
        this.$el = $el;
        this.$slides = this.$el.querySelectorAll('.magazin-slider__slide');
        this.$controlPrev = this.$el.querySelector('.magazin-slider__prev');
        this.$controlNext = this.$el.querySelector('.magazin-slider__next');
    
        this.initEvents();
        this.initLory();
      }
    
      initEvents() {
        this.$el.addEventListener('after.lory.init', () => {
          this.$el.classList.add('magazin-slider--initialized');
          this.$controlPrev.classList.add('magazin-slider__control--disabled');
        });
    
        this.$el.addEventListener('after.lory.slide', ({ detail }) => {
          const { currentSlide } = detail;
    
          if (currentSlide > 0) {
            this.$controlPrev.classList.remove('magazin-slider__control--disabled');
          } else {
            this.$controlPrev.classList.add('magazin-slider__control--disabled');
          }
    
          const isM = mql[0].matches;
          const isL = mql[1].matches;
    
          let maxSlides = isM ? 2 : 1;
          maxSlides = isL ? 4 : maxSlides;
    
          if (currentSlide < this.$slides.length - maxSlides) {
            this.$controlNext.classList.remove('magazin-slider__control--disabled');
          } else {
            this.$controlNext.classList.add('magazin-slider__control--disabled');
          }
        });
    
        this.$el.addEventListener('on.lory.resize', () => {
          this.$controlPrev.classList.add('magazin-slider__control--disabled');
          this.$controlNext.classList.remove('magazin-slider__control--disabled');
        });
      }
    
      initLory() {
        this.lory = lory(this.$el, {
          infinite: false,
          slideSpeed: 1000,
          rewindOnResize: true,
          classNameFrame: 'magazin-slider__inner',
          classNameSlideContainer: 'magazin-slider__slides',
          classNamePrevCtrl: 'magazin-slider__prev',
          classNameNextCtrl: 'magazin-slider__next',
        });
      }
    }
    
    document.querySelectorAll('.magazin-slider')
      .forEach($slider => new MagazinSlider($slider));
    
  • URL: /components/raw/magazin-slider/magazin-slider.js
  • Filesystem Path: src/components/organisms/magazin-slider/magazin-slider.js
  • Size: 2.1 KB
  • Content:
    $row-spacer-small: 3rem;
    $row-spacer: 6rem;
    
    .magazin-slider {
      width: 100%;
    }
    
    .magazin-slider__inner {
      overflow-x: scroll;
      position: relative;
      width: 100%;
    
      .magazin-slider--initialized & {
        overflow: hidden;
      }
    }
    
    .magazin-slider__header {
      margin-bottom: 4rem;
      padding: 0 $row-spacer-small / 2;
      text-align: center;
    
      .headline {
        margin: 0;
      }
    
      @include mq($from: m) {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }
    
      @include mq($from: xl) {
        padding: 0 $row-spacer / 2;
      }
    }
    
    .magazin-slider__logo {
      max-width: 12rem;
    
      @include mq($until: m) {
        display: none;
      }
    }
    
    .magazin-slider__slides {
      display: flex;
    }
    
    .magazin-slider__slide {
      flex: 1 0 100%;
      position: relative;
      width: 100%;
    
      .magazin-slider--initialized & {
        flex: 1 0 85%;
        width: 100%;
    
        @include mq($from: m) {
          flex: 1 0 50%;
          width: 50%;
        }
    
        @include mq($from: l) {
          flex: 1 0 25%;
          width: 25%;
        }
      }
    }
    
    .magazin-slider__slide .teaser {
      padding-left: calc(#{$row-spacer-small} / 2);
      padding-right: calc(#{$row-spacer-small} / 2);
    
      @include mq($from: xl) {
        padding-left: calc(#{$row-spacer} / 2);
        padding-right: calc(#{$row-spacer} / 2);
      }
    }
    
    .magazin-slider__controls {
      display: flex;
      justify-content: center;
    
      @include mq($from: m) {
        justify-content: flex-end;
        margin-bottom: $spacer;
      }
    }
    
    .magazin-slider__control {
      align-items: center;
      display: flex;
      height: 4rem;
      justify-content: center;
      margin: 0 1rem;
      opacity: 1;
      transition: opacity $default-transition-duration;
      width: 4rem;
    }
    
    .magazin-slider__prev.disabled,
    .magazin-slider__next.disabled,
    .magazin-slider__control--disabled {
      opacity: 0.25;
      pointer-events: none;
    }
    
    .magazin-slider__button {
      text-align: center;
    
      @include mq($until: m) {
        display: none;
      }
    }
    
  • URL: /components/raw/magazin-slider/magazin-slider.scss
  • Filesystem Path: src/components/organisms/magazin-slider/magazin-slider.scss
  • Size: 1.9 KB

There are no notes for this item.