PDJ Brandbox

carousel 

<section class="carousel swiper-container">
    <div class="swiper-wrapper">
        <div class="carousel__slide swiper-slide">
            <article class="product-snippet" data-initcolor="0">
                <div class="product-snippet__header">
                    <div class="product-snippet__visual">
                        <a href="https://pioneerdj.com" class="product-snippet__image">
                            <picture class="visual">
                                <img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-v10/djm-v10-main.png?h&#x3D;250&amp;w&#x3D;400&amp;hash&#x3D;B13A55D94B116CF931A83AE324726AAF90294DCF" class="lazyload" alt="">
                            </picture>

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

                <div class="product-snippet__content">
                    <h4 class="product-snippet__heading heading">
                        <a href="" class="link link--default">
                            <span class="link__label">DJM-V10</span>
                        </a>

                    </h4>

                    <span class="product-snippet__price">€ 1999</span>

                    <div class="product-snippet__description">
                        6-channel professional DJ mixer
                    </div>
                </div>

                <div class="product-snippet__actions actions actions--start">
                    <div class="actions__item">
                        <a href="" class="link link--colored">
                            <span class="link__label">Buy now</span>
                        </a>

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

        </div>
        <div class="carousel__slide swiper-slide">
            <article class="product-snippet" data-initcolor="0">
                <div class="product-snippet__header">
                    <div class="product-snippet__visual">
                        <a href="https://pioneerdj.com" class="product-snippet__image">
                            <picture class="visual">
                                <img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-900nxs2/black/djm-900nxs2-main2.png?h&#x3D;250&amp;w&#x3D;400&amp;hash&#x3D;4DA5CD8F5E2AC0FACDBDA8E3DE9FAE1EA82A1A1A" class="lazyload" alt="">
                            </picture>

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

                <div class="product-snippet__content">
                    <h4 class="product-snippet__heading heading">
                        <a href="" class="link link--default">
                            <span class="link__label">DJM-900NXS2</span>
                        </a>

                    </h4>

                    <span class="product-snippet__price">€ 1999</span>

                    <div class="product-snippet__description">
                        4-channel digital pro-DJ mixer
                    </div>
                </div>

                <div class="product-snippet__actions actions actions--start">
                    <div class="actions__item">
                        <a href="" class="link link--colored">
                            <span class="link__label">Buy now</span>
                        </a>

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

        </div>
        <div class="carousel__slide swiper-slide">
            <article class="product-snippet" data-initcolor="0">
                <div class="product-snippet__header">
                    <div class="product-snippet__visual">
                        <a href="https://pioneerdj.com" class="product-snippet__image">
                            <picture class="visual">
                                <img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/dj-sampler/djs-1000/djs-1000-main.png?h&#x3D;250&amp;w&#x3D;400&amp;hash&#x3D;F3C1E27C7D0070B31A79A30C0D705EF6198D03F5" class="lazyload" alt="">
                            </picture>

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

                <div class="product-snippet__content">
                    <h4 class="product-snippet__heading heading">
                        <a href="" class="link link--default">
                            <span class="link__label">DJS-1000</span>
                        </a>

                    </h4>

                    <span class="product-snippet__price">€ 1999</span>

                    <div class="product-snippet__description">
                        Stand-alone DJ sampler
                    </div>
                </div>

                <div class="product-snippet__actions actions actions--start">
                    <div class="actions__item">
                        <a href="" class="link link--colored">
                            <span class="link__label">Buy now</span>
                        </a>

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

        </div>
        <div class="carousel__slide swiper-slide">
            <article class="product-snippet" data-initcolor="0">
                <div class="product-snippet__header">
                    <div class="product-snippet__visual">
                        <a href="https://pioneerdj.com" class="product-snippet__image">
                            <picture class="visual">
                                <img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/turntable/plx-1000/black/plx-1000-main-pdj.png?h&#x3D;250&amp;w&#x3D;400&amp;hash&#x3D;E646125CBE3FF811A4E07568350613DFEC1AAF91" class="lazyload" alt="">
                            </picture>

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

                <div class="product-snippet__content">
                    <h4 class="product-snippet__heading heading">
                        <a href="" class="link link--default">
                            <span class="link__label">PLX-1000</span>
                        </a>

                    </h4>

                    <span class="product-snippet__price">€ 1999</span>

                    <div class="product-snippet__description">
                        High-torque direct drive professional turntable
                    </div>
                </div>

                <div class="product-snippet__actions actions actions--start">
                    <div class="actions__item">
                        <a href="" class="link link--colored">
                            <span class="link__label">Buy now</span>
                        </a>

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

        </div>
        <div class="carousel__slide swiper-slide">
            <article class="product-snippet" data-initcolor="0">
                <div class="product-snippet__header">
                    <div class="product-snippet__visual">
                        <a href="https://pioneerdj.com" class="product-snippet__image">
                            <picture class="visual">
                                <img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/headphones/hdj-x10/black/hdj-x10-k-main-if.png?h&#x3D;250&amp;w&#x3D;400&amp;hash&#x3D;3252A2E5FF602607879F0840D7798FB219D3BFFB" class="lazyload" alt="">
                            </picture>

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

                <div class="product-snippet__content">
                    <h4 class="product-snippet__heading heading">
                        <a href="" class="link link--default">
                            <span class="link__label">HDJ-X10</span>
                        </a>

                    </h4>

                    <span class="product-snippet__price">€ 1999</span>

                    <div class="product-snippet__description">
                        Flagship professional over-ear DJ headphones
                    </div>
                </div>

                <div class="product-snippet__actions actions actions--start">
                    <div class="actions__item">
                        <a href="" class="link link--colored">
                            <span class="link__label">Buy now</span>
                        </a>

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

        </div>
        <div class="carousel__slide swiper-slide">
            <article class="product-snippet" data-initcolor="0">
                <div class="product-snippet__header">
                    <div class="product-snippet__visual">
                        <a href="https://pioneerdj.com" class="product-snippet__image">
                            <picture class="visual">
                                <img data-sizes="auto" data-src="https://www.pioneerdj.com/-/media/pioneerdj/images/products/software/rekordbox-6/rekordbox-6-main.png?h&#x3D;250&amp;w&#x3D;400&amp;hash&#x3D;83507CBC778756790B427E663DC50A91C8565407" class="lazyload" alt="">
                            </picture>

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

                <div class="product-snippet__content">
                    <h4 class="product-snippet__heading heading">
                        <a href="" class="link link--default">
                            <span class="link__label">rekordbox</span>
                        </a>

                    </h4>

                    <span class="product-snippet__price">€ 1999</span>

                    <div class="product-snippet__description">
                        DJ application
                    </div>
                </div>

                <div class="product-snippet__actions actions actions--start">
                    <div class="actions__item">
                        <a href="" class="link link--colored">
                            <span class="link__label">Buy now</span>
                        </a>

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

        </div>
    </div>

    <nav class="carousel__nav">
        <div class="carousel__nav__item">
            <a class="carousel__nav__link carousel__nav__link--prev">
                <span class="carousel__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="carousel__nav__item">
            <a class="carousel__nav__link carousel__nav__link--next">
                <span class="carousel__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="carousel swiper-container">
  <div class="swiper-wrapper">
    {{#each products }}
    <div class="carousel__slide swiper-slide">
      {{render '@product-snippet' this merge=true }}
    </div>
    {{/each}}
  </div>

  {{#unless noNav}}
  <nav class="carousel__nav">
    <div class="carousel__nav__item">
      <a class="carousel__nav__link carousel__nav__link--prev">
        <span class="carousel__nav__icon">
          {{> @icon-chevron }}
        </span>
      </a>
    </div>

    <div class="carousel__nav__item">
      <a class="carousel__nav__link carousel__nav__link--next">
        <span class="carousel__nav__icon">
          {{> @icon-chevron }}
        </span>
      </a>
    </div>
  </nav>
  {{/unless}}
</section>
 
products:
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-v10/djm-v10-main.png?h=250&w=400&hash=B13A55D94B116CF931A83AE324726AAF90294DCF
      alt: ''
    heading:
      url: ''
      label: DJM-V10
      modifier: default
    description: 6-channel professional DJ mixer
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/mixer/djm-900nxs2/black/djm-900nxs2-main2.png?h=250&w=400&hash=4DA5CD8F5E2AC0FACDBDA8E3DE9FAE1EA82A1A1A
      alt: ''
    heading:
      url: ''
      label: DJM-900NXS2
      modifier: default
    description: 4-channel digital pro-DJ mixer
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/dj-sampler/djs-1000/djs-1000-main.png?h=250&w=400&hash=F3C1E27C7D0070B31A79A30C0D705EF6198D03F5
      alt: ''
    heading:
      url: ''
      label: DJS-1000
      modifier: default
    description: Stand-alone DJ sampler
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/turntable/plx-1000/black/plx-1000-main-pdj.png?h=250&w=400&hash=E646125CBE3FF811A4E07568350613DFEC1AAF91
      alt: ''
    heading:
      url: ''
      label: PLX-1000
      modifier: default
    description: High-torque direct drive professional turntable
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/headphones/hdj-x10/black/hdj-x10-k-main-if.png?h=250&w=400&hash=3252A2E5FF602607879F0840D7798FB219D3BFFB
      alt: ''
    heading:
      url: ''
      label: HDJ-X10
      modifier: default
    description: Flagship professional over-ear DJ headphones
  - visual:
      src: >-
        https://www.pioneerdj.com/-/media/pioneerdj/images/products/software/rekordbox-6/rekordbox-6-main.png?h=250&w=400&hash=83507CBC778756790B427E663DC50A91C8565407
      alt: ''
    heading:
      url: ''
      label: rekordbox
      modifier: default
    description: DJ application
  • Content: 
    const CAROUSEL = ((w, d, undefined) => {

  'use strict';

  const selectors = {
    theCarousel: '.carousel',
    thePrev: '.carousel__nav__link--prev',
    theNext: '.carousel__nav__link--next',
  };

  const classes = {
    isActive: 'is-active',
    notEnough: 'has-not-enough-slides',
  };

  const els = {};

  const init = () => {
    const slider = new Swiper(selectors.theCarousel, {
      slideActiveClass: classes.isActive,
      navigation: {
        nextEl: selectors.theNext,
        prevEl: selectors.thePrev,
      },
      nested: true,
      watchOverflow: true,
      slidesPerView: 2.5,
      spaceBetween: parseInt(getComputedStyle(d.body).getPropertyValue('--gap--2')),
      breakpoints: {
        500: {
          slidesPerView: 3.3,
        },
        800: {
          slidesPerView: 4.3,
          spaceBetween: parseInt(getComputedStyle(d.body).getPropertyValue('--gap--6')),
        },
        1100: {
          slidesPerView: 4,
          spaceBetween: parseInt(getComputedStyle(d.body).getPropertyValue('--gap--8')),
        },
      },
      on: {
        init: toggleIt,
        resize: toggleIt,
      }
    });
  };

  const toggleIt = (swiper) => {
    swiper.isLocked ? swiper.$el[0].classList.add(classes.notEnough) : swiper.$el[0].classList.remove(classes.notEnough);
  };

  d.addEventListener('DOMContentLoaded', init);

})(window, window.document);
  • URL: /components/raw/carousel/carousel.js
  • Filesystem Path: ../src/03_molecules/carousel/carousel.js
  • Size: 1.4 KB
  • Content: 
    .carousel {
  font-size: 14px;
  overflow: visible;

  @media (min-width: 1100px) {
    overflow: hidden;
  }
}

.carousel__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: calc(100% - (var(--gutter--bucket)));
  opacity: 1;
  pointer-events: none;

  @media (hover: none) and (pointer: coarse) {
    display: none;
  }

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

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

.carousel__nav__item {
  flex: 0 0 auto;
}

.carousel__nav__link {
  transition: opacity 250ms;
  position: relative;
  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: 750px) {
    width: 40px;
    height: 40px;
  }

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

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

.carousel__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;
}

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

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

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

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

  .carousel__nav__link--next & {
    transform: translate(1px, 0);
  }
}
  • URL: /components/raw/carousel/carousel.scss
  • Filesystem Path: ../src/03_molecules/carousel/carousel.scss
  • Size: 1.9 KB

No notes defined.