Partystreusel

Slider 

<section class="slider js-slider">
    <div class="slider__inner">
        <div class="slider__items">
            <div class="slider__item">
                <img class="slider__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Alt Text" data-flickity-lazyload="https://source.unsplash.com/1200x675/weekly" width="1200" height="675" />
            </div>
            <div class="slider__item">
                <img class="slider__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Alt Text" data-flickity-lazyload="https://source.unsplash.com/1200x675/weekly" width="1200" height="675" />
            </div>
            <div class="slider__item">
                <img class="slider__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Alt Text" data-flickity-lazyload="https://source.unsplash.com/1200x675/weekly" width="1200" height="675" />
            </div>
        </div>
    </div>
</section>
 
<section class="slider js-slider">
  <div class="slider__inner">
    <div class="slider__items">
      {{#each items}}
        <div class="slider__item">
          <img class="slider__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Alt Text" data-flickity-lazyload="{{this}}" width="1200" height="675"/>
        </div>
      {{/each}}
    </div>
  </div>
</section>
 
{
  "items": [
    "https://source.unsplash.com/1200x675/weekly",
    "https://source.unsplash.com/1200x675/weekly",
    "https://source.unsplash.com/1200x675/weekly"
  ]
}
  • Content: 
    .slider {
  @include clearfix;
  position: relative;
  margin: 0 auto rem(40);

  .flickity-viewport {
    position: absolute;
    width: 100%;
  }
}

.slider__inner {
  @include full;
  position: relative;
}

.slider__items {
  @include clearfix;
  padding-bottom: (675/1200)*100%; //aspect ratio
}

.slider__item {
  width: 100%;
  height: 100%;
}

.slider__image {
  width: 100%;
  height: auto;
  transition: opacity 0.4s;
  opacity: 0;

  &.flickity-lazyloaded,
  &.flickity-lazyerror {
    opacity: 1;
    background-image: none;
  }

  // IE fix
  &[data-flickity-lazyload] {
    width: auto;
  }
}

// Prev/Next navigation
.slider {
  .flickity-prev-next-button {
    display: none;

    .arrow {
      fill: $color__dark;
    }

    &:focus {
      box-shadow: 0 0 2px 2px #09f;
    }
  }
}

.slider__nav-item {
  width: rem(24);
  height: rem(24);
  clear: none;
  display: inline-block;
  margin: 0 rem(6);
  background-color: $color__brand--two;
  border: rem(6) solid $color__bright;
  border-radius: $border-radius--round;
}

// Dots navigation
.slider {
  .flickity-page-dots {
    bottom: rem(-40);
  }

  .dot {
    width: rem(20);
    height: rem(20);
    opacity: 1;
    background: transparent;
    border: rem(2) solid $color__dark;
    position: relative;
    margin: 0 rem(4);

    &::before {
      display: block;
      content: '';
      width: rem(6);
      height: rem(6);
      position: absolute;
      top: rem(5);
      left: rem(5);
      border-radius: 100%;
    }

    &:hover {
      background-color: $color__accent;
    }

    &.is-selected::before {
      background-color: $color__dark;
    }
  }
}

@include mq(large) {
  // Prev/Next navigation
  .slider {
    .flickity-prev-next-button {
      display: block;
      width: rem(40);
      height: rem(40);
      background: rgba($color__bright, 0.5);
      border: rem(2) solid $color__dark;

      &:hover {
        background: $color__accent;
      }

      &:active {
        opacity: 1;
      }

      &:disabled {
        display: none;
      }
    }
  }
}
  • URL: /components/raw/slider/_slider.scss
  • Filesystem Path: patterns/02-molecules/slider/_slider.scss
  • Size: 2.1 KB
  • Content: 
    import Flickity from 'flickity';
import Base from '../../_config/base';

class Slider extends Base {
  constructor(el) {
    super(el);
    this.slideItems = document.querySelector('.slider__items');
    this.initializeSlider();
  }

  initializeSlider() {
    /* eslint-disable no-unused-vars */
    const flkty = new Flickity(this.slideItems, {
      setGallerySize: false,
      lazyLoad: true,
      arrowShape: 'M19.1,45.1c-1.4,1.4-1.8,2.7-1.8,4.6s0.5,3.2,1.8,4.6l41.5,41.5c2.7,2.7,6.4,2.7,9.1,0c2.7-2.7,2.7-6.4,0-9.1L32.8,49.7 l36.9-36.9c2.7-2.7,2.7-6.4,0-9.1c-1.4-1.4-3.2-1.8-4.6-1.8c-1.8,0-3.2,0.5-4.6,1.8L19.1,45.1z',
    });
    /* eslint-enable no-unused-vars */
  }
}

Slider.className = 'Slider';
export default Slider;
  • URL: /components/raw/slider/slider.js
  • Filesystem Path: patterns/02-molecules/slider/slider.js
  • Size: 733 Bytes

There are no notes for this item.