hkk Frontend 2017

Magazin-Slider 

<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">
                        <div class="image-wrap"><img class="image" alt="" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                            <button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-45e9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
                        </div>
                    </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-4dd1" 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">
                        <div class="image-wrap"><img class="image" alt="" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                            <button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-8a63" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
                        </div>
                    </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-fd47" 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">
                        <div class="image-wrap"><img class="image" alt="" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                            <button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-839f" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
                        </div>
                    </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-de0c" 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">
                        <div class="image-wrap"><img class="image" alt="" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                            <button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-2bf9" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
                        </div>
                    </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-f137" 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">
                        <div class="image-wrap"><img class="image" alt="" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                            <button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-fac8" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
                        </div>
                    </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-9967" 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">
                        <div class="image-wrap"><img class="image" alt="" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                            <button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-d9af" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
                        </div>
                    </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-319a" 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">
                        <div class="image-wrap"><img class="image" alt="" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                            <button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-9604" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
                        </div>
                    </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-7c82" 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">
                        <div class="image-wrap"><img class="image" alt="" src="https://via.placeholder.com/540x360/cccaca/333333.png" />
                            <button class="copyright js-tooltip image__copyright" title="Lorem ipsum dolor sit amet, consectetuer adipiscin" aria-label="Bildquelle anzeigen">
<svg class="icon icon--copyright" id="icon-f2c5" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-copyright"></use>
</svg>
</button>
                        </div>
                    </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-d6a9" 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-b6a2" type="button">
<svg class="icon icon--chevron-left" id="icon-89a3" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-89a3">
  <title id="title-icon-89a3">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-8f38" type="button">
<svg class="icon icon--chevron-right" id="icon-a0f2" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-a0f2">
  <title id="title-icon-a0f2">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-caf8" type="button">Das ist ein Button.
<svg class="icon button__icon button__icon--after icon--arrow-diagonal" id="icon-8a9b" 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;
  margin-bottom: 2.5rem;

  @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;
}
  • 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.