<div class="combine-with combine-with--tabs">
<div class="combine-with__in">
<div class="combine-with__header">
<div class="combine-with__labels swiper-container">
<div class="swiper-wrapper">
<div class="combine-with__label swiper-slide">START DJING WITH THESE PRODUCTS</div>
</div>
</div>
</div>
<div class="combine-with__main swiper-container">
<div class="swiper-wrapper">
<div class="combine-with__item swiper-slide">
<div class="combine-with__visual">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/combine-with-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/combine-with.jpg">
<img data-sizes="auto" data-src="/graphics/combine-with-mobile.jpg" class="lazyload" alt="">
</picture>
</div>
<div class="combine-with__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=250&w=400&hash=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=250&w=400&hash=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=250&w=400&hash=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=250&w=400&hash=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=250&w=400&hash=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=250&w=400&hash=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>
<div class="combine-with__item swiper-slide">
<div class="combine-with__visual">
<picture class="visual">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
<source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
<source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
<img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
</picture>
</div>
<div class="combine-with__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=250&w=400&hash=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=250&w=400&hash=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=250&w=400&hash=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=250&w=400&hash=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=250&w=400&hash=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=250&w=400&hash=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>
</div>
</div>
</div>
</div>
<div class="combine-with combine-with--tabs">
<div class="combine-with__in">
<div class="combine-with__header">
<div class="combine-with__labels swiper-container">
<div class="swiper-wrapper">
<div class="combine-with__label swiper-slide">START DJING WITH THESE PRODUCTS</div>
</div>
</div>
</div>
<div class="combine-with__main swiper-container">
<div class="swiper-wrapper">
{{#each tabs }}
<div class="combine-with__item swiper-slide">
<div class="combine-with__visual">
{{render '@visual' this.visual merge=true }}
</div>
<div class="combine-with__carousel">
{{render '@carousel' this.products merge=true }}
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
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
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);
.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;
// }
// }
}
No notes defined.