<div class="promotion">
    <div class="promotion__item">
        <a class="promotion__link" href="#">
            <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=promotion1&w=750&h=332" alt="" class="promotion__source">
        </a>
        <div class="promotion__content">
            <h2 class="promotion__title">
				<a class="promotion__link" href="#">ULTRABUTTON ◊ Adjustable Fixation Device</a>
			</h2>
            <p class="promotion__text">Everything Ultra in Cortical Fixation</p>
        </div>
    </div>
    <div class="promotion__item">
        <a class="promotion__link" href="#">
            <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=promotion2&w=750&h=332" alt="" class="promotion__source">
        </a>
        <div class="promotion__content">
            <h2 class="promotion__title">
				<a class="promotion__link" href="#">ULTRABUTTON ◊ Adjustable Fixation Device</a>
			</h2>
            <p class="promotion__text">Everything Ultra in Cortical Fixation</p>
        </div>
    </div>
</div>
<div class="promotion">
	<div class="promotion__item">
		<a class="promotion__link" href="#">
			<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=promotion1&w=750&h=332" alt="" class="promotion__source">
		</a>
		<div class="promotion__content">
			<h2 class="promotion__title">
				<a class="promotion__link" href="#">ULTRABUTTON ◊ Adjustable Fixation Device</a>
			</h2>
			<p class="promotion__text">Everything Ultra in Cortical Fixation</p>
		</div>	
	</div>
	<div class="promotion__item">
		<a class="promotion__link" href="#">
			<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=promotion2&w=750&h=332" alt="" class="promotion__source">
		</a>
		<div class="promotion__content">
			<h2 class="promotion__title">
				<a class="promotion__link" href="#">ULTRABUTTON ◊ Adjustable Fixation Device</a>
			</h2>
			<p class="promotion__text">Everything Ultra in Cortical Fixation</p>
		</div>	
	</div>
</div>
/* No context defined for this component. */
.no-js .promotion {
	white-space: nowrap; 
	overflow: scroll;
    overflow-y: hidden;
}
.no-js .promotion__item {
	width: 66.67%;
    display: inline-block;
    white-space: normal;
}
.promotion__link {
	display: block;
	width: 100%;
    text-decoration: none;
}
.promotion__source {
	max-width: 100%;
	display: block;
	height: auto;
    margin-left: auto;
    margin-right: auto;
}
.promotion__title {}

/* Slider */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;

    &:focus {
        outline: none;
    }

    &.dragging {
        cursor: pointer;
        cursor: hand;
    }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }

    .slick-loading & {
        visibility: hidden;
    }
}
.slick-slide {
    float: left;
    //height: 100%;
    min-height: 1px;
    [dir="rtl"] & {
        float: right;
    }
    img {
        display: block;
    }
    &.slick-loading img {
        display: none;
    }

    display: none;

    &.dragging img {
        pointer-events: none;
    }

    .slick-initialized & {
        display: block;
    }

    .slick-loading & {
        visibility: hidden;
    }

    .slick-vertical & {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
}
.slick-arrow.slick-hidden {
    display: none;
}
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    margin-top: -10px;
    height: 20px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
    z-index: 4;
}
.slick-next {
    right: 0;
}
.slick-prev {
    left: 0;
}
.slick-prev:before, .slick-next:before {
    @include rem2px(font-size, 2);
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev:before {
    content: '\2039';
}
.slick-next:before {
    content: '\203A';
}

.promotion--overflow {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    .promotion__item {
        position: relative;
    }
    .promotion__link--overflow {
        max-height: 600px;
        width: auto;
        overflow: hidden;
        position: relative;
        &:before {
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 1000px 0 0 1000px;
            border-color: transparent transparent transparent #eee;
            position: absolute;
            right: calc(100vw - 50%);
            bottom: 0;
            z-index: 2;
        }
        &:after {
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 1000px 1000px;
            position: absolute;
            left: calc(100vw - 50%);
            bottom: 0;
            border-color: transparent transparent #eee transparent;
            z-index: 2;
        }

    }
    .promotion__content-wrapper {
        background: rgba(253, 115, 0, 0.81);
        padding: 2em 1em;
        @include mq ($from: med ) { 
            position: absolute;
            right: 0;
            left: 0;
            bottom: 0;
            z-index: 3;
            min-height: 172px;
        }
    }
    .promotion__content {
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .promotion__source {
        @include mq($from: large) {
           margin-top: -20vw;
        }
    }
    .promotion__title {
        color: white;
    }
    .promotion__text {}
    .promotion__link {
        color: white;
        cursor: pointer;
    }
}
.homepage-promotion {
    position: relative;
    .slick-prev, .slick-next {
        top: 40%;
        height: 50px;
        width: 50px;
         @include mq ($from: med ) {
            width: 80px;
            height: 80px;
            top: initial;
            bottom: 40px;
         }
         @include mq ($from: large ) {
            top: initial;
            bottom: 40px;
         }
    }
    .slick-prev {
        left: 20px;
        &:before{
            background: url('/assets/icons/carousel_arrow_darkgrey_left.png') no-repeat center left;
            background-image: url('/assets/icons/carousel_arrow_darkgrey_left.svg'), none;
        }
    }
    .slick-next {
        right: 0;
        &:before {
           background: url('/assets/icons/carousel_arrow_darkgrey_right.png') no-repeat center right;
           background-image: url('/assets/icons/carousel_arrow_darkgrey_right.svg'), none; 
        }
    }

    .slick-prev:before, .slick-next:before {
        content: '';
        height: 50px;
        width: 50px;
        background-repeat: no-repeat;
        display: inline-block;
        @include mq ($from: med ) {
            width: 80px;
            height: 80px;   
        } 
       
    }
}


$(document).ready(function() {
	var $promotionContainer = $('.promotion');
		$promotionContainer.each(function() {
			var $this = $(this),
			$hasMultipleChildren = $this.children('.promotion__item').length;
			if($hasMultipleChildren > 1) {
				if ($this.hasClass('promotion--overflow')) {
					$this.slick({
						arrows: true,
						infinite: true,
				  		adaptiveHeight: true,
				  		appendArrows: $('.homepage-promotion')
					});
				} else {
					$this.slick({
				  		arrows: false,
						infinite: true,
						autoplay: true,
				  		speed: 2000,
				  		adaptiveHeight: true
					});
				}
			}
		});
	
});

There are no notes for this item.