hkk Frontend 2017

Testimonial-Slider 

<section class="testimonial-slider">
    <div class="testimonial-slider__container">
        <div class="testimonial-slider__container-inner">
            <div class="testimonial-slider__inner">
                <div class="testimonial-slider__slides">
                    <div class="testimonial-slider__slide">
                        <div class="testimonial__teaser">
                            <div class="testimonial__teaser-image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-testimonial-01.jpg" />
                            </div>
                            <div class="testimonial__teaser-content">
                                <div class="testimonial__teaser-headline">
                                    <h3 class="headline headline--display-2">Das sagen unsere Mitarbeiter*innen
                                    </h3>
                                </div>
                                <div class="testimonial__teaser-quote">Da fällt mir mein Start bei der hkk ein. Meine Kollegen begrüßten mich nicht nur mit einem Blumenstrauß sondern auch mit einem selbstgefertigten, bunten Plakat. Schon innerhalb des ersten Jahres ist mein Team um zwei Mitarbeiter*innen
                                    gewachsen.</div>
                                <div class="testimonial__teaser-author">
                                    <div class="testimonial__teaser-author-name">Martina Schmidt</div>
                                    <div class="testimonial__teaser-author-role">SoFa im 2. Ausbildungsjahr</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-slider__slide">
                        <div class="testimonial__teaser">
                            <div class="testimonial__teaser-image"><img class="image" alt="Alt Text sieht anders aus" src="/images/dummy/dummy-testimonial-02.jpg" />
                            </div>
                            <div class="testimonial__teaser-content">
                                <div class="testimonial__teaser-headline">
                                    <h3 class="headline headline--display-2">Das sagen unsere Auszubildenden &amp; Studenten
                                    </h3>
                                </div>
                                <div class="testimonial__teaser-quote">Da fällt mir mein Start bei der hkk ein. Meine Kollegen begrüßten mich nicht nur mit einem Blumenstrauß sondern auch mit einem selbstgefertigten, bunten Plakat. Schon innerhalb des ersten Jahres ist mein Team um zwei Mitarbeiterinnen
                                    gewachsen.</div>
                                <div class="testimonial__teaser-author">
                                    <div class="testimonial__teaser-author-name">Martina Schmidt</div>
                                    <div class="testimonial__teaser-author-role">SoFa im 2. Ausbildungsjahr</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-slider__controls">
                    <div class="testimonial-slider__prev">
                        <button class="icon-button testimonial-slider__control icon-button--blue" id="icon-button-809c" type="button">
<svg class="icon icon--arrow-thin-left" id="icon-0b93" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-0b93">
  <title id="title-icon-0b93">Previous slide</title>
  <use xlink:href="#icon-arrow-thin-left"></use>
</svg>
</button>
                    </div>
                    <div class="testimonial-slider__next">
                        <button class="icon-button testimonial-slider__control icon-button--blue" id="icon-button-0292" type="button">
<svg class="icon icon--arrow-thin-right" id="icon-809f" viewBox="0 0 200 200" role="img" aria-labelledby="title-icon-809f">
  <title id="title-icon-809f">Next slide</title>
  <use xlink:href="#icon-arrow-thin-right"></use>
</svg>
</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

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

//- Render Testimonial-slider
#{tag}.testimonial-slider&attributes(attr): .testimonial-slider__container
  .testimonial-slider__container-inner
    .testimonial-slider__inner
      //- Slides
      .testimonial-slider__slides(class=single ? "testimonial-slider__slides--one" : "")
        if slides
          each slide in slides
            .testimonial-slider__slide
              .testimonial__teaser
                if slide.image
                  .testimonial__teaser-image
                    != include('@image', {image: slide.image, copyright: slide.copyright})
                
                  .testimonial__teaser-content
                    if slide.headline
                      .testimonial__teaser-headline
                        != include('@headline--display-2', {text: slide.headline, level: 3})

                    if slide.text
                      .testimonial__teaser-quote #{slide.text}

                    if slide.author || slide.authorRole
                      .testimonial__teaser-author
                        if slide.author 
                          .testimonial__teaser-author-name #{slide.author}

                        if slide.authorRole 
                          .testimonial__teaser-author-role #{slide.authorRole}
      
      .testimonial-slider__controls
        //- Previous slide
        .testimonial-slider__prev
          != include('@icon-button--blue', { attr: { class: 'testimonial-slider__control' }, icon: 'arrow-thin-left', title: 'Previous slide' })

        //- Next slide
        .testimonial-slider__next
          != include('@icon-button--blue', { attr: { class: 'testimonial-slider__control' }, icon: 'arrow-thin-right', title: 'Next slide' })
 
{
  "single": null,
  "slides": [
    {
      "image": "/images/dummy/dummy-testimonial-01.jpg",
      "headline": "Das sagen unsere Mitarbeiter*innen",
      "text": "Da fällt mir mein Start bei der hkk ein. Meine Kollegen begrüßten mich nicht nur mit einem Blumenstrauß sondern auch mit einem selbstgefertigten, bunten Plakat. Schon innerhalb des ersten Jahres ist mein Team um zwei Mitarbeiter*innen gewachsen.",
      "author": "Martina Schmidt",
      "authorRole": "SoFa im 2. Ausbildungsjahr"
    },
    {
      "image": "/images/dummy/dummy-testimonial-02.jpg",
      "headline": "Das sagen unsere Auszubildenden & Studenten",
      "text": "Da fällt mir mein Start bei der hkk ein. Meine Kollegen begrüßten mich nicht nur mit einem Blumenstrauß sondern auch mit einem selbstgefertigten, bunten Plakat. Schon innerhalb des ersten Jahres ist mein Team um zwei Mitarbeiterinnen gewachsen.",
      "author": "Martina Schmidt",
      "authorRole": "SoFa im 2. Ausbildungsjahr"
    }
  ]
}
  • 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 TestimonialSlider {
  constructor($el) {
    this.$el = $el;
    this.$slides = this.$el.querySelectorAll('.testimonial-slider__slide');
    this.$controlPrev = this.$el.querySelector('.testimonial-slider__prev');
    this.$controlNext = this.$el.querySelector('.testimonial-slider__next');

    // Don't init slider, if only one slide exists
    if (this.$slides.length === 1) {
      return;
    }

    this.initEvents();
    this.initLory();
  }

  initEvents() {
    this.$el.addEventListener('after.lory.init', () => {
      this.$el.classList.add('testimonial-slider--initialized');
      this.$controlPrev.classList.add('testimonial-slider__control--disabled');
    });

    this.$el.addEventListener('after.lory.slide', ({ detail }) => {
      const { currentSlide } = detail;

      if (currentSlide > 0) {
        this.$controlPrev.classList.remove('testimonial-slider__control--disabled');
      } else {
        this.$controlPrev.classList.add('testimonial-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) {
        this.$controlNext.classList.remove('testimonial-slider__control--disabled');
      } else {
        this.$controlNext.classList.add('testimonial-slider__control--disabled');
      }
    });

    this.$el.addEventListener('on.lory.resize', () => {
      this.$controlPrev.classList.add('testimonial-slider__control--disabled');
      this.$controlNext.classList.remove('testimonial-slider__control--disabled');
    });
  }

  initLory() {
    this.lory = lory(this.$el, {
      infinite: false,
      slideSpeed: 1000,
      rewindOnResize: true,
      classNameFrame: 'testimonial-slider__inner',
      classNameSlideContainer: 'testimonial-slider__slides',
      classNamePrevCtrl: 'testimonial-slider__prev',
      classNameNextCtrl: 'testimonial-slider__next',
    });
  }
}

document.querySelectorAll('.testimonial-slider')
  .forEach($slider => new TestimonialSlider($slider));
  • URL: /components/raw/testimonial-slider/testimonial-slider.js
  • Filesystem Path: src/components/organisms/testimonial-slider/testimonial-slider.js
  • Size: 2.3 KB
  • Content: 
    .testimonial-slider {
  width: 100%;

  @include mq($from: m) {
    padding-bottom: 5rem;
    padding-top: 5rem;
  }
}

.testimonial-slider__container-inner {
  @include make-container();

  @include mq($until: m) {
    padding-left: 0;
    padding-right: 0;
  }
}

.testimonial-slider__inner {
  position: relative;
  width: 100%;

  .testimonial-slider--initialized & {
    overflow: hidden;
  }
}

.testimonial-slider__slides {
  display: flex;
}

.testimonial-slider__slide {
  flex: 1 0 100%;
  position: relative;
  width: 100%;
}

.testimonial__teaser {
  display: flex;
  flex-direction: column;

  @include mq($from: m) {
    flex-direction: row;
  }
}

.testimonial__teaser-image {
  @include mq($from: m) { 
    flex: 1 0 50%;
    width: 50%;
  }

  @include mq($from: xl) { 
    flex: 1 0 45%;
    width: 45%;
  }
}

.testimonial__teaser-content {
  padding: 2.5rem 3rem 3rem 4rem;

  :last-child {
    margin-bottom: 0;
  }

  @include mq($from: m) {
    display: flex;
    flex-direction: column;
    padding: 0 2rem 4.5rem;
  }

  @include mq($from: xl) {
    padding-left: 3rem;
    padding-right: 0;
  }
}

.testimonial__teaser-headline {
  margin-bottom: 1.5rem;

  .headline {
    margin-bottom: 0;
  }
}

.testimonial__teaser-quote {
  padding-bottom: 1.5rem;
  padding-top: 4.5rem;
  position: relative;

  &::before,
  &::after {
    color: $color-blue;
    content: '"';
    font-size: 5rem;
    font-style: italic;
    font-weight: 600;
    line-height: 0;
    position: absolute;

    @include mq($from: l) {
      font-size: 6rem;
    }

    @include mq($from: xl) {
      font-size: 7.2rem;
    }
  }

  &::before {
    left: 0;
    top: 1.5rem;
  }

  &::after {
    bottom: 0;
    right: 2px;
  }
  
  @include mq($from: m) {
    margin-top: auto;
  }

  @include mq($from: l) { 
    color: $color-blue;
    font-size: 1.9rem;
    padding-left: 4.9rem;
  }
}

.testimonial__teaser-author {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2.5rem;

  @include mq($from: l) {
    padding-left: 4.9rem;
  }
}

.testimonial-slider__controls {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
  position: relative;

  @include mq($from: m) {
    justify-content: flex-end;
    margin-bottom: $spacer;
  }
}

.testimonial-slider__control {
  align-items: center;
  display: flex;
  height: 4rem;
  justify-content: center;
  margin: 0 0.5rem;
  opacity: 1;
  transition: opacity $default-transition-duration;
  width: 4rem;

  .testimonial-slider__prev & {
    margin-left: 0;
  }

  .testimonial-slider__next & {
    margin-right: 0;
  }

  @include mq($from: m) {
    margin-top: -4rem;
  }
}

.testimonial-slider__prev.disabled,
.testimonial-slider__next.disabled,
.testimonial-slider__control--disabled {
  opacity: 0.25;
  pointer-events: none;
}

.testimonial-slider__slides--one + .testimonial-slider__controls {
  display: none;
}

.detail-page {
  .testimonial-slider__container {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    @include mq($from: page-max) {
      margin-left: calc(50% - #{$page-max-width} / 2);
      margin-right: calc(50% - #{$page-max-width} / 2);
    }
  }
}

.overview-page__container {
  .testimonial-slider__container-inner {
    padding-left: 0;
    padding-right: 0;
  }

  .testimonial-slider__container {
    @include mq($until: m) {
      margin-left: -1rem;
      margin-right: -1rem;
    }
  }
}
  • URL: /components/raw/testimonial-slider/testimonial-slider.scss
  • Filesystem Path: src/components/organisms/testimonial-slider/testimonial-slider.scss
  • Size: 3.4 KB

There are no notes for this item.