<div class="slider left-side-white-background" data-mobile-first="true" data-infinite="true" data-center-mode="false" data-dots="false" data-autoplay="false" data-autoplay-speed="3000" data-pause-on-focus="true" data-pause-on-hover="true" data-slides-to-show="3" data-slides-to-scroll="1" data-swipe-to-slide="true" data-element-slides=".slider__slides" data-dots-class="slider__dots" data-loading-class="slider--loading" data-loader-visible-class="loader--visible" data-element-slide=".slider__item" data-element-loader=".loader" data-element-nav-prev=".slider__prev" data-element-nav-next=".slider__next" data-responsive-config='[{"breakpoint": 767, "settings": {"slidesToShow": 4, "slidesToScroll": 1, "dots": false}}, {"breakpoint": 1023, "settings": {"slidesToShow": 6, "slidesToScroll": 1, "dots": false}}]'>
<div class="loader loader--visible" aria-live="polite" aria-label="Do not refresh the page">
<div class="loader__icon"></div>
</div>
<div class="slider__heading ">
<h2 class="heading--first-level margin-0">
Top brands
</h2>
</div>
<div class="slider__handler">
<div class="slider__navigation ">
<div class="slider__arrows">
<button class="button button--icon button--icon-border slider__nav-button slider__prev" type="button" aria-label="Previous slide">
<svg class="icon button__icon slider__nav-icon" role="img">
<use xlink:href="/images/icons-sprite.svg#arrow-left"></use>
</svg>
</button>
<button class="button button--icon button--icon-border slider__nav-button slider__next" type="button" aria-label="Next slide">
<svg class="icon button__icon slider__nav-icon" role="img">
<use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
</svg>
</button>
</div>
</div>
<div class="slider__container">
<div class="slider__slides">
<div class=" slider__item slider__slide-item">
<picture class="image slider__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-nike_144-144.jpg" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-nike_208-208.jpg" media="" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-992_254.png" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1170_300.png" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-nike_208-208.jpg" alt="Brand nike" />
</picture>
</div>
<div class=" slider__item slider__slide-item">
<picture class="image slider__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_144-144.jpg" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_208-208.jpg" media="" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-992_254.png" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1170_300.png" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-adidas_208-208.jpg" alt="Brand adidas" />
</picture>
</div>
<div class=" slider__item slider__slide-item">
<picture class="image slider__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-nike_144-144.jpg" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-nike_208-208.jpg" media="" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-992_254.png" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1170_300.png" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-nike_208-208.jpg" alt="Brand nike" />
</picture>
</div>
<div class=" slider__item slider__slide-item">
<picture class="image slider__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-armani_144-144.jpg" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-armani_208-208.jpg" media="" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-992_254.png" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1170_300.png" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-armani_208-208.jpg" alt="Brand armani" />
</picture>
</div>
<div class=" slider__item slider__slide-item">
<picture class="image slider__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_144-144.jpg" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_208-208.jpg" media="" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-992_254.png" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1170_300.png" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-adidas_208-208.jpg" alt="Brand adidas" />
</picture>
</div>
<div class=" slider__item slider__slide-item">
<picture class="image slider__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-armani_144-144.jpg" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-armani_208-208.jpg" media="" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-992_254.png" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1170_300.png" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-armani_208-208.jpg" alt="Brand armani" />
</picture>
</div>
<div class=" slider__item slider__slide-item">
<picture class="image slider__image">
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_144-144.jpg" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/home/brands/brand-adidas_208-208.jpg" media="" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-992_254.png" media="(max-width: 1024px)" />
<source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/banner/banner-1170_300.png" media="" />
<img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/home/brands/brand-adidas_208-208.jpg" alt="Brand adidas" />
</picture>
</div>
</div>
</div>
</div>
<div class="
slider__after
">
<a class="link slider__link" href="#" title="See all Brands">
See all Brands
</a>
</div>
</div>
<script src="/components/raw/slider/slider.js"></script>
<div
class="slider {{ class }}"
{{#each attributes }}
{{{ attr }}}
{{/each }}
>
{{render '@loader' }}
{{#if heading }}
<div class="slider__heading {{ heading.class }}">
{{ render (component heading.content) heading.contentContext merge=true }}
</div>
{{/if }}
{{#if contentBefore }}
<div class="slider__before {{ contentBefore.class }}">
{{ render (component contentBefore.content) contentBefore.contentContext merge=true }}
</div>
{{/if }}
<div class="slider__handler">
<div class="slider__navigation {{ navigationClass }}">
<div class="slider__arrows">
{{render '@button--icon' iconPrev }}
{{render '@button--icon' iconNext }}
</div>
</div>
<div class="slider__container">
<div class="slider__slides">
{{#each slides }}
<div class=" slider__item {{ this.itemClass }}"
{{{ this.itemAttributes }}}
>
{{ render (component content) contentContext merge=true}}
</div>
{{/each}}
</div>
</div>
</div>
{{#if contentAfter }}
<div
class="
slider__after
{{ contentAfter.class }}
"
>
{{ render (component contentAfter.content) contentAfter.contentContext merge=true }}
</div>
{{/if }}
</div>
{{#if script }}
<script src="{{ static 'slider.js' }}"></script>
{{/if}}
{
"script": true,
"class": "left-side-white-background",
"attributes": [
{
"attr": "data-mobile-first=\"true\""
},
{
"attr": "data-infinite=\"true\""
},
{
"attr": "data-center-mode=\"false\""
},
{
"attr": "data-dots=\"false\""
},
{
"attr": "data-autoplay=\"false\""
},
{
"attr": "data-autoplay-speed=\"3000\""
},
{
"attr": "data-pause-on-focus=\"true\""
},
{
"attr": "data-pause-on-hover=\"true\""
},
{
"attr": "data-slides-to-show=\"3\""
},
{
"attr": "data-slides-to-scroll=\"1\""
},
{
"attr": "data-swipe-to-slide=\"true\""
},
{
"attr": "data-element-slides=\".slider__slides\""
},
{
"attr": "data-dots-class=\"slider__dots\""
},
{
"attr": "data-loading-class=\"slider--loading\""
},
{
"attr": "data-loader-visible-class=\"loader--visible\""
},
{
"attr": "data-element-slide=\".slider__item\""
},
{
"attr": "data-element-loader=\".loader\""
},
{
"attr": "data-element-nav-prev=\".slider__prev\""
},
{
"attr": "data-element-nav-next=\".slider__next\""
},
{
"attr": "data-responsive-config='[{\"breakpoint\": 767, \"settings\": {\"slidesToShow\": 4, \"slidesToScroll\": 1, \"dots\": false}}, {\"breakpoint\": 1023, \"settings\": {\"slidesToShow\": 6, \"slidesToScroll\": 1, \"dots\": false}}]'"
}
],
"heading": {
"class": "",
"content": "heading",
"contentContext": {
"tag": "h2",
"class": "heading--first-level margin-0",
"text": "Top brands"
}
},
"iconPrev": {
"tag": "button",
"class": "button--icon-border slider__nav-button slider__prev",
"icon": {
"id": "arrow-left",
"class": "button__icon slider__nav-icon"
},
"attributes": "type=\"button\" aria-label=\"Previous slide\""
},
"iconNext": {
"tag": "button",
"class": "button--icon-border slider__nav-button slider__next",
"icon": {
"id": "arrow-right",
"class": "button__icon slider__nav-icon"
},
"attributes": "type=\"button\" aria-label=\"Next slide\""
},
"slides": [
{
"itemClass": "slider__slide-item",
"content": "image--picture",
"contentContext": {
"src": "/images/home/brands/brand-nike_208-208.jpg",
"class": "slider__image",
"defaultSrc": "/images/home/brands/brand-nike_208-208.jpg",
"sources": [
{
"src": "/images/home/brands/brand-nike_144-144.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/home/brands/brand-nike_208-208.jpg",
"mediaQuery": ""
}
],
"alt": "Brand nike"
}
},
{
"itemClass": "slider__slide-item",
"content": "image--picture",
"contentContext": {
"src": "/images/home/brands/brand-adidas_208-208.jpg",
"class": "slider__image",
"defaultSrc": "/images/home/brands/brand-adidas_208-208.jpg",
"sources": [
{
"src": "/images/home/brands/brand-adidas_144-144.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/home/brands/brand-adidas_208-208.jpg",
"mediaQuery": ""
}
],
"alt": "Brand adidas"
}
},
{
"itemClass": "slider__slide-item",
"content": "image--picture",
"contentContext": {
"src": "/images/home/brands/brand-nike_208-208.jpg",
"class": "slider__image",
"defaultSrc": "/images/home/brands/brand-nike_208-208.jpg",
"sources": [
{
"src": "/images/home/brands/brand-nike_144-144.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/home/brands/brand-nike_208-208.jpg",
"mediaQuery": ""
}
],
"alt": "Brand nike"
}
},
{
"itemClass": "slider__slide-item",
"content": "image--picture",
"contentContext": {
"src": "/images/home/brands/brand-armani_208-208.jpg",
"class": "slider__image",
"defaultSrc": "/images/home/brands/brand-armani_208-208.jpg",
"sources": [
{
"src": "/images/home/brands/brand-armani_144-144.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/home/brands/brand-armani_208-208.jpg",
"mediaQuery": ""
}
],
"alt": "Brand armani"
}
},
{
"itemClass": "slider__slide-item",
"content": "image--picture",
"contentContext": {
"src": "/images/home/brands/brand-adidas_208-208.jpg",
"class": "slider__image",
"defaultSrc": "/images/home/brands/brand-adidas_208-208.jpg",
"sources": [
{
"src": "/images/home/brands/brand-adidas_144-144.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/home/brands/brand-adidas_208-208.jpg",
"mediaQuery": ""
}
],
"alt": "Brand adidas"
}
},
{
"itemClass": "slider__slide-item",
"content": "image--picture",
"contentContext": {
"src": "/images/home/brands/brand-armani_208-208.jpg",
"class": "slider__image",
"defaultSrc": "/images/home/brands/brand-armani_208-208.jpg",
"sources": [
{
"src": "/images/home/brands/brand-armani_144-144.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/home/brands/brand-armani_208-208.jpg",
"mediaQuery": ""
}
],
"alt": "Brand armani"
}
},
{
"itemClass": "slider__slide-item",
"content": "image--picture",
"contentContext": {
"src": "/images/home/brands/brand-adidas_208-208.jpg",
"class": "slider__image",
"defaultSrc": "/images/home/brands/brand-adidas_208-208.jpg",
"sources": [
{
"src": "/images/home/brands/brand-adidas_144-144.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/home/brands/brand-adidas_208-208.jpg",
"mediaQuery": ""
}
],
"alt": "Brand adidas"
}
}
],
"contentAfter": {
"content": "link",
"contentContext": {
"href": "#",
"title": "See all Brands",
"text": "See all Brands",
"class": "slider__link"
}
}
}
// left-side menu
$left-side-white-background-menu-width : 400px !default;
$left-side-white-background-fullpage-width : calc(100% - #{$left-side-white-background-menu-width}) !default;
$slider__margin : 0 !default;
$slider__width : 100% !default;
$slider__min-height : 56px !default; //loader size
$slider__heading-justify-content : center !default;
$slider__heading-min-height : 48px !default;
$slider__heading-margin : 0 0 $spacer--semi-medium !default;
//slider products
$slider__heading-margin--products : 0 0 $spacer--extra-large !default;
$slider__item-padding--products : $spacer !default;
//vars used to avaiod jumping content before js is loaded
$slider__hidden-item-number--products : 3 !default;
$slider__hidden-item-number\@medium--products : 4 !default;
//slider brands
$slider__item-width--brands : 96px !default;
$slider__item-to-show--brands : 3 !default;
$slider__item-width\@medium--brands : 144px !default;
$slider__item-to-show\@medium--brands : 4 !default;
$slider__item-width\@large--brands : 144px !default;
$slider__item-to-show\@large--brands : 6 !default;
$slider__item-width\@max-width--brands : 208px !default;
$slider__item-to-show\@max-width--brands : 6 !default;
$slider__handler-max-width--brands : $slider__item-width--brands * $slider__item-to-show--brands !default;
$slider__handler-max-width\@medium--brands : $slider__item-width\@medium--brands * $slider__item-to-show\@medium--brands !default;
$slider__handler-max-width\@large--brands : $slider__item-width\@large--brands * $slider__item-to-show\@large--brands !default;
$slider__handler-max-width\@max-width--brands : $slider__item-width\@max-width--brands * $slider__item-to-show\@max-width--brands !default;
//navigation
$slider__navigation-display : none !default;
$slider__navigation-display-breakpoint : $screen-m !default;
$slider__navigation-width : 100% !default;
$slider__navigation-top : 50% !default;
$slider__navigation-IE-width : calc(50% - #{$slider__navigation-top}) !default;
$slider__prev-left : 0 !default;
$slider__next-right : 0 !default;
$slider__nav-button-border-radius : 0 !default;
$slider__nav-button-size : 48px !default;
$slider__nav-icon-size : 24px !default;
//dots
$slider__dots-bottom : 0 !default;
$slider__dots-margin : 0 10px 0 0 !default;
$slider__dots-padding : 0 !default;
$slider__dot-size : 6px !default;
$slider__dot-background-color : $gray !default;
$slider__dot-background-color--active : $color-primary !default;
$slider__link-font-weight : $font-weight-bold !default;
$slider__link-min-height : 48px !default;
$slider__link-text-align : center !default;
$slider__link-font-size : $font-size-base !default;
$slider__after-padding : $spacer--medium 0 !default;
$slider__after-text-align : center !default;
//breakpoint overflow items styles
$slider__container-before-bg : linear-gradient(to left, transparent, $white 50%) !default;
$slider__container-after-bg : linear-gradient(to right, transparent, $white 50%) !default;
@import "slider-variables";
.slider {
display: block;
position: relative;
width: $slider__width;
height: auto;
min-height: $slider__min-height;
margin: $slider__margin;
&__heading {
display: flex;
justify-content: $slider__heading-justify-content;
align-items: center;
min-height: $slider__heading-min-height;
margin: $slider__heading-margin;
}
&--loading {
.slider__navigation,
.slider__dots {
display: none;
}
}
&--products {
.slider__heading {
margin: $slider__heading-margin--products;
}
.slider__item {
padding: $slider__item-padding--products;
height: auto;
}
}
&--brands {
.slider__container {
width: $slider__handler-max-width--brands;
margin-left: auto;
margin-right: auto;
position: relative;
@include mq($screen-m) {
width: $slider__handler-max-width\@medium--brands;
}
@include mq($screen-l) {
width: $slider__handler-max-width\@large--brands;
}
@include mq($max-content-width) {
width: $slider__handler-max-width\@max-width--brands;
}
&:before,
&:after {
display: block;
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100%;
z-index: $z-index-low;
@include mq($slider__navigation-display-breakpoint) {
display: none;
}
}
&:before {
background: $slider__container-before-bg;
right: 100%;
}
&:after {
background: $slider__container-after-bg;
left: 100%;
}
}
.slider__handler {
overflow: hidden;
@include mq($slider__navigation-display-breakpoint) {
overflow: visible;
}
}
.slick-list {
overflow: visible;
@include mq($slider__navigation-display-breakpoint) {
overflow: hidden;
}
}
}
&__handler {
position: relative;
}
&__slides {
height: auto;
.slick-list {
min-height: $slider__nav-button-size;
}
}
&__item {
height: auto;
display: none;
}
&__navigation {
display: $slider__navigation-display;
position: absolute;
width: $slider__navigation-width;
top: $slider__navigation-top;
margin-top: -$slider__nav-button-size / 2;
padding: 0;
z-index: $z-index-low;
@include mq($slider__navigation-display-breakpoint) {
display: block;
@include isIE() {
top: $slider__navigation-IE-width;
}
}
}
&__nav-button {
width: $slider__nav-button-size;
height: $slider__nav-button-size;
min-width: $slider__nav-button-size;
border-radius: $slider__nav-button-border-radius;
padding: 0;
position: absolute;
}
&__nav-icon {
width: $slider__nav-icon-size;
height: $slider__nav-icon-size;
position: absolute;
top: 50%;
left: 50%;
margin-top: -$slider__nav-icon-size / 2;
margin-left: -$slider__nav-icon-size / 2;
transition: $transition-base;
}
&__prev {
left: $slider__prev-left;
&:before {
transform-origin: 100% 0;
}
}
&__next {
left: auto;
right: $slider__next-right;
}
&__dots {
display: block;
position: relative;
list-style: none;
margin: $slider__dots-margin;
padding: $slider__dots-padding;
text-align: center;
width: 100%;
left: 0;
bottom: $slider__dots-bottom;
li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
&.slick-active {
&:before {
display: block;
position: absolute;
z-index: 1;
content: '';
width: $slider__dot-size;
height: $slider__dot-size;
padding: 0;
background: $slider__dot-background-color--active;
border-radius: 50%;
top: 50%;
margin-top: -($slider__dot-size / 2);
}
}
}
button {
display: block;
position: relative;
width: $slider__dot-size;
height: $slider__dot-size;
padding: 0;
background-color: $slider__dot-background-color;
border: 0;
border-radius: 50%;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin: $slider__dots-margin;
}
}
&__link {
align-items: center;
font-size: $slider__link-font-size;
font-weight: $slider__link-font-weight;
min-height: $slider__link-min-height;
text-align: $slider__link-text-align;
&--button,
&--button-secondary {
@extend .button;
}
&--button-secondary {
@extend .button--secondary;
}
}
&__after {
padding: $slider__after-padding;
text-align: $slider__after-text-align;
}
&.left-side-white-background {
@include mq($screen-l) {
display: flex;
flex-direction: row-reverse;
width: 100%;
}
.fullpage {
@include mq($screen-l) {
width: 75%;
}
.fullpage {
@include mq($screen-l) {
width: 100%;
}
}
.slider-item {
position: relative;
&__text {
width: 100% !important; // sass-lint:disable-line no-important
position: absolute;
color: white;
bottom: 0;
.shadow-bottom-top {
background: linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 154, 125, 0.05) 100%);
}
.text-inner {
position: relative;
padding: 0 0 1rem 1rem;
@include mq($screen-m) {
padding: 0 0 2rem 2rem;
}
@include mq($screen-l) {
padding: 0 0 3rem 3rem;
}
}
&--header,
&--description {
position: relative;
padding-left: 40px;
max-width: 750px;
color: #fff;
font-size: 22px;
line-height: 45px;
font-weight: 400;
}
&--header {
font-family: $font-family-heading;
font-size: 68px;
line-height: 80px;
font-weight: 300;
}
}
}
}
.left-side-menu {
display: none;
@include mq($screen-l) {
display: flex;
padding: 5rem 0 0 5rem;
flex-direction: column;
width: 400px;
list-style: none;
}
li {
a {
margin-bottom: 1rem;
padding-bottom: 1rem;
position: relative;
color: $color-primary;
opacity: 0.45;
&:after {
position: absolute;
content: "";
bottom: 0;
width: 75px;
height: 1px;
left: 0;
background: $color-primary;
}
&:hover {
text-decoration: none;
opacity: 0.8;
}
&.active {
opacity: 1;
font-weight: 400;
max-width: max-content;
&:after {
width: 110%;
}
}
}
}
}
}
&.arrows-left-right {
padding-top: 2rem;
@include mq($screen-m) {
padding-top: 3rem;
}
@include mq($screen-l) {
padding-top: 6rem;
}
@include mq($screen-xl) {
padding-top: 8rem;
}
.slider-item {
&__text {
padding: 2rem;
@include mq($screen-m) {
padding: 4rem;
}
}
}
.slider__button--icon {
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid #000000;
background: transparent;
&.next {
right: -50px;
}
&.prev {
left: -50px;
}
}
}
}
(function Slider() {
'use strict';
function init() {
let sliders = [...document.querySelectorAll('.slider')];
sliders.forEach(element => {
let dataValues = element.dataset;
$.when(createSlider(element, dataValues)).then(displaySlider(element, dataValues));
});
}
function createSlider(element, dataValues) {
let slider = $(element),
slides = slider.find(dataValues.elementSlides),
navPrev = slider.find(dataValues.elementNavPrev),
navNext = slider.find(dataValues.elementNavNext);
slides.not('.slick-initialized').slick(
{
slide: dataValues.elementSlide,
dots: JSON.parse(dataValues.dots),
infinite: JSON.parse(dataValues.infinite),
centerMode: JSON.parse(dataValues.centerMode),
mobileFirst: JSON.parse(dataValues.mobileFirst),
prevArrow: navPrev,
nextArrow: navNext,
dotsClass: dataValues.dotsClass,
autoplay: JSON.parse(dataValues.autoplay),
autoplaySpeed: parseInt(dataValues.autoplaySpeed),
pauseOnFocus: JSON.parse(dataValues.pauseOnFocus),
pauseOnHover: JSON.parse(dataValues.pauseOnHover),
slidesToShow: parseInt(dataValues.slidesToShow),
slidesToScroll: parseInt(dataValues.slidesToScroll),
swipeToSlide: JSON.parse(dataValues.swipeToSlide),
responsive: JSON.parse(dataValues.responsiveConfig)
}
)
}
function displaySlider(element, dataValues) {
let slider = $(element),
loader = slider.find(dataValues.elementLoader);
loader.removeClass(dataValues.loaderVisibleClass);
slider.removeClass(dataValues.loadingClass);
}
init();
}());
There are no notes for this item.