PDJ Brandbox

combine-with: carousel 

<section class="combine-with combine-with--carousel">
    <div class="combine-with__in">
        <div class="combine-with__header">
            <div class="section-header">
                <div class="section-header__inner section--8">
                    <h2 class="section-header__heading heading heading--4">Getting started</h2>

                    <div class="section-header__description">Everything to get the music going.</div>
                </div>
            </div>

        </div>

        <div class="combine-with__content">
            <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>

        </div>
    </div>
</section>
 
<section class="combine-with combine-with--carousel">
  <div class="combine-with__in">
    <div class="combine-with__header">
      {{render '@section-header' section-header merge=true }}
    </div>

    <div class="combine-with__content">
      {{render '@carousel' products merge=true }}
    </div>
  </div>
</section>
 
section-header:
  heading: Getting started
  description: Everything to get the music going.
products:
  - visual:
      src: /graphics/product-snippet.png
      alt: ''
    heading:
      url: ''
      label: CDJ-2000NXS
      modifier: default
    price: €1999
    description: Pro-DJ multi player with high-res audio support
    action:
      url: ''
      label: Buy now
  - visual:
      src: /graphics/product-snippet.png
      alt: ''
    heading:
      url: ''
      label: CDJ-2000NXS
      modifier: default
    price: €1999
    description: Pro-DJ multi player
  - visual:
      src: /graphics/product-snippet.png
      alt: ''
    heading:
      url: ''
      label: CDJ-2000NXS
      modifier: default
    price: €1999
    description: Pro-DJ multi player
tabs:
  - label: ANDERE MONITORLAUTSPRECHER
    visual:
      src:
        mobile: /graphics/combine-with-mobile.jpg
        desktop: /graphics/combine-with.jpg
      alt: ''
    products:
      - visual:
          src: /graphics/cdj-850-main.png
          alt: ''
        heading:
          url: ''
          label: CDJ-850
          modifier: default
        description: Digital deck with full scratch jog wheel and rekordbox support
      - visual:
          src: /graphics/cdj-tour1-main.png
          alt: ''
        heading:
          url: ''
          label: CDJ-TOUR1
          modifier: default
        price: €1999
        description: TOUR system multi player with fold-out touch screen
      - visual:
          src: /graphics/xdj-1000mk2-main.png
          alt: ''
        heading:
          url: ''
          label: XDJ-1000MK2
          modifier: default
        description: rekordbox-ready, digital deck with high-res audio support
  - label: KOMBINIEREN MIT
    visual:
      src:
        mobile: /graphics/video-player-mobile.jpg
        desktop: /graphics/video-player.jpg
      alt: ''
    products:
      - visual:
          src: /graphics/product-snippet.png
          alt: ''
        heading:
          url: ''
          label: CDJ-2000NXS
          modifier: default
        price: €1999
        description: Pro-DJ multi player with high-res audio support
        action:
          url: ''
          label: Buy now
      - visual:
          src: /graphics/product-snippet.png
          alt: ''
        heading:
          url: ''
          label: CDJ-2000NXS
          modifier: default
        price: €1999
        description: Pro-DJ multi player
  • Content: 
    const COMBINEWITH = ((w, d, undefined) => {

  'use strict';

  const selectors = {
    theMain: '.combine-with__main',
    theThumbs: '.combine-with__labels',
  };

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

  const els = {};

  const init = () => {
    [...document.querySelectorAll(selectors.theMain)].forEach(main => {
      new Swiper(main, {
        allowTouchMove: false,
        slidesPerView: 1,
        speed: 0,
        thumbs: {
          swiper: getThumbs(main),
        },
      });
    });

    window.dispatchEvent(new Event('resize'));
  };

  const getThumbs = (main) => {
    els.theThumbs = main.parentElement.querySelector(selectors.theThumbs);

    if (!els.theThumbs) { return; }

    return new Swiper(els.theThumbs, {
      watchOverflow: true,
      slidesPerView: 'auto',
      centeredSlides: true,
      centeredSlidesBounds: true,
      slideToClickedSlide: true,
      autoScrollOffset: 2,
      spaceBetween: parseInt(getComputedStyle(d.body).getPropertyValue('--gap--4')),
      breakpoints: {
        900: {
          centeredSlides: false,
          centeredSlidesBounds: false,
          slideToClickedSlide: false,
          autoScrollOffset: 0,
          spaceBetween: parseInt(getComputedStyle(d.body).getPropertyValue('--gap--8')),
        },
      },
      on: {
        init: () => {
          els.theThumbs.classList.add(classes.thumbsInit);
        },
      },
    });
  };

  d.addEventListener('DOMContentLoaded', init);

})(window, window.document);
  • URL: /components/raw/combine-with/combine-with.js
  • Filesystem Path: ../src/04_organisms/combine-with/combine-with.js
  • Size: 1.5 KB
  • Content: 
    .combine-with {
  overflow: hidden;
  padding: 0 var(--gutter--bucket);
}

.combine-with__in {
  max-width: var(--section--8);
  margin: 0 auto;

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


.combine-with__header {
  margin-bottom: var(--gap--6);
  display: flex;

  @media (min-width: 900px) {
    margin-bottom: var(--gap--8);
  }
}

.combine-with__labels {
  overflow: visible;
}

.combine-with__label {
  transition: opacity 250ms;
  position: relative;
  display: block;
  width: auto;
  padding-bottom: var(--gap--2);
  font-size: var(--h--5);
  font-weight: 700;
  line-height: 1;
  opacity: .2;
  cursor: pointer;
  user-select: none;

  @media (min-width: 750px) {
    font-size: var(--h--4);
  }

  &.swiper-slide-thumb-active {
    opacity: 1;
    cursor: initial;
  }

  &:last-child {
    margin-right: 0 !important;
  }

  &.swiper-slide {
    &:first-child:last-child {
      // if single tab, break long labels for mobile
      flex-shrink: 1;
    }

    &:not(:first-child:last-child) {
      max-width: 50vw;
      word-break: break-word;
      display: flex;
      align-items: center;
    }
  }
}

.combine-with__label:after {
  transition: height 250ms;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 0;
  content: '';
}

.combine-with__label.swiper-slide-thumb-active:after {
  height: 3px;
  background-color: var(--color--action);

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

.combine-with__main {
  height: 0;
  overflow: hidden;

  &.swiper-container-initialized {
    height: auto;
    overflow: visible;
  }
}

.combine-with__item:not(.swiper-slide-active) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.combine-with__visual {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-top: (206 / 352) * 100%;
  margin-bottom: var(--gap--6);

  @media (min-width: 900px) {
    margin-bottom: var(--gap--8);
    padding-top: (650 / 1110) * 100%;
  }
}

.combine-with__carousel {
  .has-not-enough-slides {
    @media (min-width: 900px) {
      display: flex;
      justify-content: center;
    }
  }

  // .swiper-wrapper {
  //   @media (min-width: 900px) {
  //     width: auto;
  //   }
  // }
}
  • URL: /components/raw/combine-with/combine-with.scss
  • Filesystem Path: ../src/04_organisms/combine-with/combine-with.scss
  • Size: 2.2 KB

No notes defined.