<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.