home: Default

<section class="hero-home__wrapper theme-2020">
    <div class="hero-home swiper" data-delay="5000">
        <div class="hero-home__inner swiper-wrapper">
            <article class="hero-home__block swiper-slide">
                <a href="https://prodcms.pioneerdj.com/en/product/controller/ddj-rev5/black/overview/" class="hero-home__link" title="Find out more about DDJ-REV5">
                    <div class="hero-home__visual">
                        <picture class="visual">
                            <source media="(min-width: 768px)" data-sizes="auto" data-srcset="/graphics/hero-desktop-webp.webp" type="image/webp">
                            <source media="(min-width: 768px)" data-sizes="auto" data-srcset="https://prodcms.pioneerdj.com/-/media/project/pioneer/pioneerdj/home/carousel/2023/ddj-rev5_web_home-crousel_2000x800.jpg">
                            <source media="" data-sizes="auto" data-srcset="/graphics/hero-mobile-webp.webp" type="image/webp">
                            <img data-sizes="auto" data-src="https://prodcms.pioneerdj.com/-/media/project/pioneer/pioneerdj/home/carousel/2023/ddj-rev5_key-visual_mobile.jpg" class="lazyload" alt="Picture of a DDJ-REV5">
                        </picture>

                    </div>

                    <div class="hero-home__content">
                        <h2 class="hero-home__block__content__title heading heading--1">DDJ-REV5</h2>

                        <h3 class="hero-home__block__content__subtitle heading heading--4">REVolutionary Control</h3>

                        <p class="hero-home__block__content__description">Scratch-style 2-channel performance DJ controller</p>
                    </div>
                </a>
            </article>
            <article class="hero-home__block swiper-slide">
                <a href="https://prodcms.pioneerdj.com/en/product/player/plx-crss12/black/overview/" class="hero-home__link" title="Find out more about PLX-CRSS12">
                    <div class="hero-home__visual">
                        <picture class="visual">
                            <source media="(min-width: 768px)" data-sizes="auto" data-srcset="https://prodcms.pioneerdj.com/-/media/project/pioneer/pioneerdj/home/carousel/2023/plx-crss12-home-carousel-2000x800-revised.jpg">
                            <img data-sizes="auto" data-src="https://prodcms.pioneerdj.com/-/media/project/pioneer/pioneerdj/home/carousel/2023/plx-crss12_key-visual_mobile.jpg" class="lazyload" alt="Picture of the PLX-CRSS12">
                        </picture>

                    </div>

                    <div class="hero-home__content">
                        <h2 class="hero-home__block__content__title heading heading--1">PLX-CRSS12</h2>

                        <h3 class="hero-home__block__content__subtitle heading heading--4">HYBRID CREATIVITY</h3>

                        <p class="hero-home__block__content__description">Professional direct drive turntable with DVS control</p>
                    </div>
                </a>
            </article>
            <article class="hero-home__block swiper-slide">
                <a href="https://prodcms.pioneerdj.com/en/product/controller/ddj-flx10/black/overview/" class="hero-home__link" title="Find out more about DDJ-FLX10">
                    <div class="hero-home__visual">
                        <picture class="visual">
                            <source media="(min-width: 768px)" data-sizes="auto" data-srcset="https://prodcms.pioneerdj.com/-/media/project/pioneer/pioneerdj/home/carousel/2023/ddj-flx10_web_home-carousel_2000x800.jpg">
                            <img data-sizes="auto" data-src="https://prodcms.pioneerdj.com/-/media/project/pioneer/pioneerdj/home/carousel/2023/ddj-flx10_key-visual_mobile.jpg" class="lazyload" alt="Picture of a DDJ-FLX10">
                        </picture>

                    </div>

                    <div class="hero-home__content">
                        <h2 class="hero-home__block__content__title heading heading--1">DDJ-FLX10</h2>

                        <h3 class="hero-home__block__content__subtitle heading heading--4">Split. Mix. Create</h3>

                        <p class="hero-home__block__content__description">4-channel DJ performance controller for multiple DJ applications</p>
                    </div>
                </a>
            </article>
            <article class="hero-home__block swiper-slide">
                <a href="https://prodcms.pioneerdj.com/en/product/all-in-one-system/opus-quad/black/overview/" class="hero-home__link" title="Find out more about OPUS-QUAD">
                    <div class="hero-home__visual">
                        <picture class="visual">
                            <source media="(min-width: 768px)" data-sizes="auto" data-srcset="https://prodcms.pioneerdj.com/-/media/project/pioneer/pioneerdj/home/carousel/2023/opus-quad_web_home-carousel_2000x800-final.jpg">
                            <img data-sizes="auto" data-src="https://prodcms.pioneerdj.com/-/media/project/pioneer/pioneerdj/home/carousel/2023/opus-quad_key-visual_mobile.jpg" class="lazyload" alt="Picture of a OPUS-QUAD">
                        </picture>

                    </div>

                    <div class="hero-home__content">
                        <h2 class="hero-home__block__content__title heading heading--1">OPUS-QUAD</h2>

                        <h3 class="hero-home__block__content__subtitle heading heading--4">The Art of Sound</h3>

                        <p class="hero-home__block__content__description">Professional all-in-one DJ system</p>
                    </div>
                </a>
            </article>
            <article class="hero-home__block swiper-slide">
                <a href="https://prodcms.pioneerdj.com/en/product/mixer/djm-a9/black/overview/" class="hero-home__link" title="Find out more avout DJM-A9">
                    <div class="hero-home__visual">
                        <picture class="visual">
                            <source media="(min-width: 768px)" data-sizes="auto" data-srcset="https://prodcms.pioneerdj.com/-/media/project/pioneer/pioneerdj/home/carousel/2023/djm-a9_web_home-carousel_2000x800.jpg">
                            <img data-sizes="auto" data-src="https://prodcms.pioneerdj.com/-/media/project/pioneer/pioneerdj/home/carousel/2023/djm-a9_key-visual_mobile.jpg" class="lazyload" alt="Picture of a DJM-A9">
                        </picture>

                    </div>

                    <div class="hero-home__content">
                        <h2 class="hero-home__block__content__title heading heading--1">DJM-A9</h2>

                        <h3 class="hero-home__block__content__subtitle heading heading--4">A New Horizon</h3>

                        <p class="hero-home__block__content__description">4-channel professional DJ mixer</p>
                    </div>
                </a>
            </article>
        </div>

        <div class="swiper-pagination"></div>

        <div class="hero-home__navigation">
            <button class="hero-home__navbutton hero-home__prev">
                <span class="screen-reader-text">Prev</span>
                <span class="hero-home__navicon"><svg class="icon-chevron--thin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <path fill="currentColor" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                    </svg>
                </span>
            </button>
            <button class="hero-home__navbutton hero-home__next">
                <span class="screen-reader-text">Next</span>
                <span class="hero-home__navicon"><svg class="icon-chevron--thin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                        <path fill="currentColor" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                    </svg>
                </span>
            </button>
        </div>
    </div>
</section>

<script src="../../scripts/hero-home.js"></script>

<div class="spacer spacer--6"></div>

<div class="section col-xs-12 gap--bottom-in-medium gap--top-in-small bgc--neutrals-3-5">
    <div class="section__inner">
        <div class="component rich-text sectionHeader col-xs-12">
            <div class="component-content">
                <h2 class="sectionHeader__title heading heading--2 heading--fancy heading--centered field-text">Discover Pioneer DJ</h2>
            </div>
        </div>
    </div>
</div>

<div class="section-header section-header--centered">
    <div class="section-header__inner section--8">
        <h2 class="section-header__heading heading heading--4">Section heading</h2>

        <div class="section-header__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, delectus?</div>
    </div>
</div>