<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    
   	<div class="swb__apple" id="swb">
    <!--OWL CAROUSEL-->
    <link rel="stylesheet" type="text/css" href="https://images2.drct2u.com/repo/common/owl-carousel-2/owl.carousel.css">

        
    <div class="swb__header">
        <!-- DUPLICATE FOR EXTRA SLIDES - GIVE A NEW UNIQUE NUMBER e.g. swb__hero--two/three/four etc -->
        <div class="swb__hero swb__hero--two">

                <div class="swb__text-container swb__text--m-center swb__text--d-center">
<h1 class="swb__text--h1 swb__text--galano">Title goes here</h1>
                    <p class="swb__text swb__text--p swb__text--galano swb__text--white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed mauris id felis ultricies tincidunt. Vestibulum maximus ligula vel neque elementum efficitur. </p>
                </div>
        </div>
    </div>
        
    <div class="swb__cta-container swb__text--u-center">
    </div>
        
    <div class="swb__category">
        <div class="swb__category--carousel owl-carousel slider__player swb__text--u-center">
            <div class="swb__category--item">
                <a href="#">
                    <img src="https://via.placeholder.com/401x369" alt="" class="swb__category--img">
                    <div class="swb__category--text">
                        <h2 class="swb__text swb__text--h2 swb__text--galano swb__text--black">Title goes here</h2>
                        <div class="swb__cta swb__cta--black">Shop now</div>
                    </div>
                </a>
            </div>
            <div class="swb__category--item">
                <a href="#">
                    <img src="https://via.placeholder.com/401x369" alt="" class="swb__category--img">
                    <div class="swb__category--text">
                        <h2 class="swb__text swb__text--h2 swb__text--galano swb__text--black">Title goes here</h2>
                        <div class="swb__cta swb__cta--black">Shop now</div>
                    </div>
                </a>
            </div>
            <div class="swb__category--item">
                <a href="#">
                    <img src="https://via.placeholder.com/401x369" alt="" class="swb__category--img">
                    <div class="swb__category--text">
                        <h2 class="swb__text swb__text--h2 swb__text--galano swb__text--black">Title goes here</h2>
                        <div class="swb__cta swb__cta--black">Shop now</div>
                    </div>
                </a>
            </div>
            <div class="swb__category--item">
                <a href="#">
                    <img src="https://via.placeholder.com/401x369" alt="" class="swb__category--img">
                    <div class="swb__category--text">
                        <h2 class="swb__text swb__text--h2 swb__text--galano swb__text--black">Title goes here</h2>
                        <div class="swb__cta swb__cta--black">Shop now</div>
                    </div>
                </a>
            </div>
            <div class="swb__category--item">
                <a href="#">
                    <img src="https://via.placeholder.com/401x369" alt="" class="swb__category--img">
                    <div class="swb__category--text">
                        <h2 class="swb__text swb__text--h2 swb__text--galano swb__text--black">Title goes here</h2>
                        <div class="swb__cta swb__cta--black">Shop now</div>
                    </div>
                </a>
            </div>
            <div class="swb__category--item">
                <a href="#">
                    <img src="https://via.placeholder.com/401x369" alt="" class="swb__category--img">
                    <div class="swb__category--text">
                        <h2 class="swb__text swb__text--h2 swb__text--galano swb__text--black">Title goes here</h2>
                        <div class="swb__cta swb__cta--black">Shop now</div>
                    </div>
                </a>
            </div>
            <div class="swb__category--item">
                <a href="#">
                    <img src="https://via.placeholder.com/401x369" alt="" class="swb__category--img">
                    <div class="swb__category--text">
                        <h2 class="swb__text swb__text--h2 swb__text--galano swb__text--black">Title goes here</h2>
                        <div class="swb__cta swb__cta--black">Shop now</div>
                    </div>
                </a>
            </div>
            <div class="swb__category--item">
                <a href="#">
                    <img src="https://via.placeholder.com/401x369" alt="" class="swb__category--img">
                    <div class="swb__category--text">
                        <h2 class="swb__text swb__text--h2 swb__text--galano swb__text--black">Title goes here</h2>
                        <div class="swb__cta swb__cta--black">Shop now</div>
                    </div>
                </a>
            </div>
            <div class="swb__category--item">
                <a href="#">
                    <img src="https://via.placeholder.com/401x369" alt="iPod" class="swb__category--img">
                    <div class="swb__category--text">
                        <h2 class="swb__text swb__text--h2 swb__text--galano swb__text--black">Title goes here</h2>
                        <div class="swb__cta swb__cta--black">Shop now</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
        

    <!-- Scripts -->
    <script type="text/javascript" src="https://images2.drct2u.com/repo/common/owl-carousel-2/owl.carousel.min.js" ></script>
    <script type="text/javascript" src="https://images2.drct2u.com/repo/FW/desktop/pages/homepage/standard/2020/02_Feb/10/01-javascript/picturefill.min.js"></script>
    <script type="text/javascript" src="https://images2.drct2u.com/content/common/images/ejavascript/swb_generic_200624.js"></script>
</div>
    
    

    
	body{
		margin: 0;
		padding: 0;
	}

#swb {
    position: relative;
    max-width:1300px;
    margin:0 auto 1em;
    font-size:14px;
}

#swb * {
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

#swb a, #swb a:link, #swb a:visited {
    text-decoration: none;
    color:#111;
}

#swb img {
    max-width:100%;
    display:block;
}
#swb .swb__hero{
  padding:2em;
  background:#000;
  position:relative;
}
#swb .swb__text {
    letter-spacing:0.04em;
    margin:0 auto;
}

#swb .swb__text--h1 {
    font-size:3em;
    margin-bottom:.3em;
    color:#FFF;
  font-weight:normal;
}
#swb .swb__text--h2 {
    font-size:1.5em;
    margin-bottom:.5em;
}
#swb .swb__text--p {
    font-size:1em;
  margin:0;
}

#swb .swb__text--galano {
    font-family:'GalanoGrotesque-Regular', sans-serif;
}

#swb .swb__text--bold {
    font-family:'GalanoGrotesque-SemiBold', sans-serif;
}

#swb .swb__text--white {
    color:#FFF;
}

#swb .swb__text--black {
    color:#111;
}

#swb .swb__text--upper {
    text-transform: uppercase;
}

#swb .swb__text--underline {
    text-decoration:underline;
}

#swb .swb__cta {
    display:-webkit-inline-box;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height:2.857em;
    padding:0.857em 2.857em;
    font-family:'GalanoGrotesque-Regular', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.1em;
    text-align: center;
    width:auto;
    border:1px solid #FFF;
    -webkit-transition:background ease-in-out .3s, border-color .3s ease-in-out, color ease-in-out .4s;
    transition:background ease-in-out .3s, border-color .3s ease-in-out, color ease-in-out .4s;
    font-size: 3vw;
}

#swb .swb__cta--black {
    background:#111;
    color:#FFF;
    border-color:#111;
}

#swb .swb__cta--black:hover {
    background:#fff;
    color:#111;
}

#swb .swb__cta--white {
    background:#FFF;
    color:#111;
}

#swb .swb__cta--white:hover {
    background:#111;
    color:#FFF;
    border-color:#111;
}

#swb .swb__cta--outline {
    background:transparent;
    color:#111;
    border-color:#111;
}

#swb .swb__cta--outline:hover {
    background:#111;
    color:#FFF;
}

#swb .swb__text--u-center {
    text-align:center;
}

#swb .swb__text--u-left {
    text-align:left;
}

#swb .swb__text--u-right {
    text-align:right;
}

@media all and (max-width:767px){

    #swb .swb__text--m-center {
        text-align:center;
    }

    #swb .swb__text--m-left {
        text-align:left;
    }

    #swb .swb__text--m-right {
        text-align:right;
    }

}

@media all and (min-width:768px) {
    #swb .swb__text--d-center {
        text-align:center;
    }

    #swb .swb__text--d-left {
        text-align:left;
    }

    #swb .swb__text--d-right {
        text-align:right;
    }
}

/* SWB Styles */

#swb .swb__text-container {
    position: relative;
}

#swb .swb__cta-container {
    margin: 2em auto;
}

#swb .swb__category--text {
    margin:1em auto 2em;
}

#swb .owl-dots {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: absolute;
    right: 1em;
    top: 1em;
}

#swb .owl-dot {
    height: 1em;
    width: 1em;
    border-radius: 100%;
    background: #444;
    margin-left:.5em;
}

#swb .owl-dot.active {
    background: #fff;
    border: 1px solid #bbb;
}

#swb .owl-nav {
    position: absolute;
    top: 26%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
}

#swb .owl-prev {
    color: transparent;
    background: url(https://images2.drct2u.com/content/images/FGN/180909SS_JDW_SONY_arrow_left.png) center/contain no-repeat;
    height: 4em;
    position: absolute;
    left: 0;
}

#swb .owl-next {
    color: transparent;
    background: url(https://images2.drct2u.com/content/images/FGN/180909SS_JDW_SONY_arrow_right.png) center/contain no-repeat;
    height: 4em;
    position: absolute;
    right: 0;
}

@media all and (min-width:768px) {
    #swb .swb__cta {
    min-width:200px;
    font-size: 1em;
    }
    #swb .swb__category--carousel {
        width:90%;
        margin:0 auto;
    }

    #swb .owl-nav {
        top:20%;
    }

    #swb .owl-prev {
        left:-5%;
    }

    #swb .owl-next {
        right: -5%;
    }
}
$(document).ready(function(){

    var hasMultipleSlides = false;

    if (document.querySelectorAll('.swb__hero').length > 1) {
        hasMultipleSlides = true;
    }
    $('.swb__header--carousel.owl-carousel').owlCarousel({
        items: 1,
        nav: false,
        autoplayTimeout:3000,
        dots: hasMultipleSlides,
        loop: hasMultipleSlides,
        autoplay: hasMultipleSlides,
        mouseDrag: hasMultipleSlides,
        touchDrag: hasMultipleSlides
    });
    $('.swb__category--carousel.owl-carousel').owlCarousel({
        items: 2,
        nav: true,
        margin:10,
        autoplayTimeout:3500,
        dots: false,
        loop: true,
        autoplay: true,
        responsive: {
            0: {
                stagePadding: 40,
            },
            768: {
                items:3
            },
            1024: {
                items:4
            },
            1300: {
                items:5
            }
        }

    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.