PDJ Brandbox

slideshow 

<section class="slideshow swiper-container">
    <div class="slideshow__inner swiper-wrapper">
        <div class="slideshow__item slideshow__item--even swiper-slide">
            <div class="slideshow__slide">
                <div class="slideshow__bg">
                    <picture class="visual">
                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/slide01-mobile.png">
                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/slide01.png">
                        <img data-sizes="auto" data-src="/graphics/slide01-mobile.png" class="lazyload" alt="">
                    </picture>

                </div>

                <div class="slideshow__slide__inner">
                    <div class="slideshow__content">
                        <div class="slideshow__count">1 / 3</div>

                        <h3 class="slideshow__heading heading heading--3">DJM-S7</h3>

                        <div class="slideshow__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                    </div>

                    <div class="slideshow__visual">
                        <div class="slideshow__image">
                            <picture class="visual visual--in-flow visual--contained">
                                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/DJM-S7-mobile.png">
                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/DJM-S7.png">
                                <img data-sizes="auto" data-src="/graphics/DJM-S7-mobile.png" class="lazyload" alt="">
                            </picture>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slideshow__item slideshow__item--odd swiper-slide">
            <div class="slideshow__slide">
                <div class="slideshow__bg">
                    <picture class="visual">
                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/slide01-mobile.png">
                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/slide01.png">
                        <img data-sizes="auto" data-src="/graphics/slide01-mobile.png" class="lazyload" alt="">
                    </picture>

                </div>

                <div class="slideshow__slide__inner">
                    <div class="slideshow__content">
                        <div class="slideshow__count">2 / 3</div>

                        <h3 class="slideshow__heading heading heading--3">DJM-S11</h3>

                        <div class="slideshow__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                    </div>

                    <div class="slideshow__visual">
                        <div class="slideshow__image">
                            <picture class="visual visual--in-flow visual--contained">
                                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/DJM-S11-mobile.png">
                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/DJM-S11.png">
                                <img data-sizes="auto" data-src="/graphics/DJM-S11-mobile.png" class="lazyload" alt="">
                            </picture>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slideshow__item slideshow__item--even swiper-slide">
            <div class="slideshow__slide">
                <div class="slideshow__bg">
                    <picture class="visual">
                        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/slide01-mobile.png">
                        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/slide01.png">
                        <img data-sizes="auto" data-src="/graphics/slide01-mobile.png" class="lazyload" alt="">
                    </picture>

                </div>

                <div class="slideshow__slide__inner">
                    <div class="slideshow__content">
                        <div class="slideshow__count">3 / 3</div>

                        <h3 class="slideshow__heading heading heading--3">DJM-V10</h3>

                        <div class="slideshow__description">Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
                    </div>

                    <div class="slideshow__visual">
                        <div class="slideshow__image">
                            <picture class="visual visual--in-flow visual--contained">
                                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/DJM-V10-mobile.png">
                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/DJM-V10.png">
                                <img data-sizes="auto" data-src="/graphics/DJM-V10-mobile.png" class="lazyload" alt="">
                            </picture>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <nav class="slideshow__nav">
        <div class="slideshow__nav__item">
            <a class="slideshow__nav__link slideshow__nav__link--prev">
                <span class="slideshow__nav__icon">
                    <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                    </svg>
                </span>
            </a>
        </div>

        <div class="slideshow__nav__item">
            <a class="slideshow__nav__link slideshow__nav__link--next">
                <span class="slideshow__nav__icon">
                    <svg class="icon-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <path fill="currentColor" d="M11.172 9.82L13 8 9.906 4.99 6.04 1.21c-.281-.28-.703-.28-.914 0l-.914.91c-.281.28-.281.7 0 .91L9.273 8l-5.062 4.97c-.281.28-.281.7 0 .91l.914.91c.281.28.703.28.914 0l5.133-4.97z" />
                    </svg>
                </span>
            </a>
        </div>
    </nav>
</section>
 
<section class="slideshow swiper-container">
  <div class="slideshow__inner swiper-wrapper">
    {{#each slides}}
    <div class="slideshow__item slideshow__item--{{oddOrEven @index}} swiper-slide">
      <div class="slideshow__slide">
        <div class="slideshow__bg">
          {{render '@visual' this.bg}}
        </div>

        <div class="slideshow__slide__inner">
          <div class="slideshow__content">
            <div class="slideshow__count">{{counter @index}} / {{../slides.length}}</div>

            <h3 class="slideshow__heading heading heading--3">{{this.content.heading}}</h3>

            <div class="slideshow__description">{{this.content.description}}</div>
          </div>

          <div class="slideshow__visual">
            <div class="slideshow__image">
              {{render '@visual' this.visual}}
            </div>
          </div>
        </div>
      </div>
    </div>
    {{/each}}
  </div>

  <nav class="slideshow__nav">
    <div class="slideshow__nav__item">
      <a class="slideshow__nav__link slideshow__nav__link--prev">
        <span class="slideshow__nav__icon">
          {{> @icon-chevron }}
        </span>
      </a>
    </div>

    <div class="slideshow__nav__item">
      <a class="slideshow__nav__link slideshow__nav__link--next">
        <span class="slideshow__nav__icon">
          {{> @icon-chevron }}
        </span>
      </a>
    </div>
  </nav>
</section>
 
slides:
  - bg:
      src:
        mobile: /graphics/slide01-mobile.png
        desktop: /graphics/slide01.png
    content:
      heading: DJM-S7
      description: >-
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
    visual:
      in-flow: true
      contained: true
      src:
        mobile: /graphics/DJM-S7-mobile.png
        desktop: /graphics/DJM-S7.png
      alt: ''
      srcset: >-
        https://via.placeholder.com/500x250 500w,
        https://via.placeholder.com/1000x500 1000w,
        https://via.placeholder.com/2000x1000 2000w
  - bg:
      src:
        mobile: /graphics/slide01-mobile.png
        desktop: /graphics/slide01.png
    content:
      heading: DJM-S11
      description: >-
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur.
    visual:
      in-flow: true
      contained: true
      src:
        mobile: /graphics/DJM-S11-mobile.png
        desktop: /graphics/DJM-S11.png
      alt: ''
      srcset: >-
        https://via.placeholder.com/500x250 500w,
        https://via.placeholder.com/1000x500 1000w,
        https://via.placeholder.com/2000x1000 2000w
  - bg:
      src:
        mobile: /graphics/slide01-mobile.png
        desktop: /graphics/slide01.png
    content:
      heading: DJM-V10
      description: >-
        Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur.
    visual:
      in-flow: true
      contained: true
      src:
        mobile: /graphics/DJM-V10-mobile.png
        desktop: /graphics/DJM-V10.png
      alt: ''
      srcset: >-
        https://via.placeholder.com/500x250 500w,
        https://via.placeholder.com/1000x500 1000w,
        https://via.placeholder.com/2000x1000 2000w
  • Content: 
    const SLIDESHOW = ((w, d, Swiper, undefined) => {

  'use strict';

  const selectors = {
    theWrap: '.slideshow',
    thePrev: '.slideshow__nav__link--prev',
    theNext: '.slideshow__nav__link--next',
  };

  const classes = {
    isActive: 'is-active',
  };

  const els = {};

  const bounding = {};

  let boundingsSet = false;
  let timer = null;

  const init = () => {
    els.theWrap = d.querySelector(selectors.theWrap);

    if (!els.theWrap) {
      return;
    };

    bindIt();
  };

  const resize = () => {
    if (!els.theWrap) {
      return;
    };

    clearTimeout(timer);

    timer = setTimeout(() => {
      setBoundings();
    }, 200);
  };

  const bindIt = () => {
    const slider = new Swiper(selectors.theWrap, {
      slideActiveClass: classes.isActive,
      navigation: {
        nextEl: selectors.theNext,
        prevEl: selectors.thePrev,
      },
      slidesPerView: 1,
      speed: 350,
      loop: true,
      breakpoints: {
        900: {
          speed: 700,
        }
      }
    });

    els.theWrap.addEventListener('mouseenter', setBoundings);

    els.theWrap.addEventListener('mousemove', (e) => {
      const posX = e.clientX - bounding.theWrap.x;
      const posY = e.clientY - bounding.theWrap.y;

      let posXperc = (posX / bounding.theWrap.width);
      let posYperc = (posY / bounding.theWrap.height);

      posXperc = posXperc * (1 - (0.93));
      posYperc = posYperc * (1 - (0.93));

      const expoX = (posXperc - ((1 - (0.93)) / 2)) * 100;
      const expoY = (posYperc - ((1 - (0.93)) / 2)) * 100;

      els.theWrap.style.setProperty('--expo-x', expoX);
      els.theWrap.style.setProperty('--expo-y', expoY);
    });
  };

  const setBoundings = () => {
    bounding.theWrap = els.theWrap.getBoundingClientRect();
    boundingsSet = true;
  };

  d.addEventListener('DOMContentLoaded', init);
  w.addEventListener('load', resize);
  w.addEventListener('resize', resize);

})(window, window.document, window.Swiper);
  • URL: /components/raw/slideshow/slideshow.js
  • Filesystem Path: ../src/04_organisms/slideshow/slideshow.js
  • Size: 2 KB
  • Content: 
    .slideshow {
  display: block;
  width: 100%;
  max-width: var(--section--9);
  margin: 0 auto;
  overflow: hidden;
}

.slideshow__item, .component.swiper-slide {
  display: flex;
  height: auto;
  overflow: hidden;

  @media (min-width: 900px) {
    height: calc(100vh - var(--header-height));
    height: calc((var(--vh, 1px) * 100) - var(--header-height));
    max-height: 980px;
  }
}

.component.swiper-slide {
  @media (min-width: 900px) {
    display: block;
  }
}

.slideshow__slide {
  position: relative;
  display: flex;
  flex: auto;
}

.slideshow__bg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;

  @media (hover: hover) {
    transition: transform 200ms;
    transform: scale3d(1.1, 1.1, 1.1) translate3d(calc(var(--expo-x) * -.5%), calc(var(--expo-y) * -.5%), 0);
  }
}

.slideshow__slide__inner {
  flex: auto;
  display: flex;
  flex-direction: column;
  max-width: var(--section--6);
  margin: 0 auto;
  padding: calc(var(--gutter--bucket) * 2) calc(var(--gutter--bucket) * 3);
  pointer-events: none;

  @media (min-width: 900px) {
    flex-direction: row;
    align-items: center;
  }

  @media (hover: hover) {
    transition: transform 200ms;
    transform: translate3d(calc(var(--expo-x) * 1%), calc(var(--expo-y) * 1%), 0);
  }

  .slideshow__item--even & {
    @media (min-width: 900px) {
      flex-direction: row-reverse;
    }
  }
}

.slideshow__content {
  position: relative;
  font-size: var(--p--1);

  @media (min-width: 900px) {
    flex: 1;
  }
}

.slideshow__count {
  font-weight: 500;
  margin-bottom: calc(var(--gap) * 2);
  line-height: 1;
}

.slideshow__heading {
  line-height: 1;
  font-weight: 500;
}

.slideshow__description {
  margin-top: calc(var(--gap) * 4);
}

.slideshow__visual {
  display: block;
  width: 100%;
  margin-top: calc(var(--gap) * 10);

  @media (min-width: 900px) {
    flex: 1;
    margin-top: 0;
  }
}

.slideshow__image {
  position: relative;
  display: block;
  width: 100%;
}

.slideshow__nav {
  transition: opacity 300ms;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--section--8);
  opacity: 1;
  pointer-events: none;

  @media (min-width: 900px) {
    padding: 0 var(--gutter--bucket);
  }

  .swiper-slide:not(.swiper-slide-active) & {
    display: none;
  }
}

.slideshow__nav__item {
  flex: none;
  display: flex;
  justify-content: center;
  width: calc(var(--gutter--bucket) * 3);
}

.slideshow__nav__link {
  transition: opacity 250ms;
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--color--action);
  border-radius: 50%;
  pointer-events: all;
  opacity: 1;

  @media (min-width: 900px) {
    width: 40px;
    height: 40px;
  }

  &:hover {
    color: var(--color--action);
    text-decoration: none;
    cursor: pointer;
  }

  &[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0;
  }
}

.slideshow__nav__link:before {
  transition: box-shadow 250ms, opacity 250ms;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color--neutrals-0);
  box-shadow: 0 2px 4px rgba(#000, .14);
  opacity: .8;
}

.slideshow__nav__link:hover:before {
  opacity: 1;
  box-shadow: 0 4px 4px rgba(#000, .14);
}

.slideshow__nav__link:active:before {
  box-shadow: 0 0 5px rgba(#000, .14);
}

.slideshow__nav__icon {
  position: relative;
  flex: none;
  width: 44%;

  .slideshow__nav__link--prev & {
    transform: translate(-1px, 0) rotate(180deg);
  }

  .slideshow__nav__link--next & {
    transform: translate(1px, 0);
  }
}
  • URL: /components/raw/slideshow/slideshow.scss
  • Filesystem Path: ../src/04_organisms/slideshow/slideshow.scss
  • Size: 3.8 KB

No notes defined.