<div class="section__content categories-sliderhtml slick-initialized slick-slider">
<button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: inline-block;">Previous
</button>
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 5772px; transform: translate3d(-1554px, 0px, 0px);">
<div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-6" aria-hidden="true" style="width: 222px;">
<a href="#" title="Title
" class="category-grid-item__link" tabindex="-1" aria-label="">
<div class="category-grid-item__content">
<h3 class="category-grid-item__text">
Eettafels
</h3>
<span class="category-grid-item__icon">
<script src="/components/raw/common-js/../collapsible/collapsible.js"></script>
<script src="/components/raw/common-js/../dropdown-list/dropdown-list.js"></script>
<script src="/components/raw/common-js/../tooltip/tooltip.js" defer></script>
<script src="/components/raw/common-js/../more-info/more-info.js" defer></script>
<script src="/components/raw/common-js/../modal/modal.js"></script>
</span>
</div>
</a>
</div>
<div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-5" aria-hidden="true" style="width: 222px;">
<a href="#" title="Title" class="category-grid-item__link" tabindex="-1" aria-label="">
<div class="category-grid-item__content">
<h3 class="category-grid-item__text">
Kledingkasten
</h3>
<span class="category-grid-item__icon">
<script src="/components/raw/common-js/../collapsible/collapsible.js"></script>
<script src="/components/raw/common-js/../dropdown-list/dropdown-list.js"></script>
<script src="/components/raw/common-js/../tooltip/tooltip.js" defer></script>
<script src="/components/raw/common-js/../more-info/more-info.js" defer></script>
<script src="/components/raw/common-js/../modal/modal.js"></script>
</span>
</div>
</a>
</div>
<div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-4" aria-hidden="true" style="width: 222px;">
<a href="#" title="Title " class="category-grid-item__link" tabindex="-1" aria-label="">
<div class="category-grid-item__content">
<h3 class="category-grid-item__text">
Bureaus
</h3>
<span class="category-grid-item__icon">
<script src="/components/raw/common-js/../collapsible/collapsible.js"></script>
<script src="/components/raw/common-js/../dropdown-list/dropdown-list.js"></script>
<script src="/components/raw/common-js/../tooltip/tooltip.js" defer></script>
<script src="/components/raw/common-js/../more-info/more-info.js" defer></script>
<script src="/components/raw/common-js/../modal/modal.js"></script>
</span>
</div>
</a>
</div>
</div>
</div>
<button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: inline-block;">Next</button>
</div>
<div class="section__content categories-sliderhtml slick-initialized slick-slider">
<button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: inline-block;">Previous
</button>
<div class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 5772px; transform: translate3d(-1554px, 0px, 0px);">
<div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-6"
aria-hidden="true" style="width: 222px;">
<a href="#" title="Title
" class="category-grid-item__link" tabindex="-1" aria-label="">
<div class="category-grid-item__content">
<h3 class="category-grid-item__text">
Eettafels
</h3>
<span class="category-grid-item__icon">
{{ render @icon }}
</span>
</div>
</a>
</div>
<div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-5"
aria-hidden="true" style="width: 222px;">
<a href="#" title="Title" class="category-grid-item__link" tabindex="-1" aria-label="">
<div class="category-grid-item__content">
<h3 class="category-grid-item__text">
Kledingkasten
</h3>
<span class="category-grid-item__icon">
{{ render @icon }}
</span>
</div>
</a>
</div>
<div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-4"
aria-hidden="true" style="width: 222px;">
<a href="#" title="Title " class="category-grid-item__link" tabindex="-1" aria-label="">
<div class="category-grid-item__content">
<h3 class="category-grid-item__text">
Bureaus
</h3>
<span class="category-grid-item__icon">
{{ render @icon }}
</span>
</div>
</a>
</div>
</div>
</div>
<button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: inline-block;">Next</button>
</div>
{
"script": true,
"class": "slider--loader-visible",
"attributes": [
{
"attr": "data-slider=\"default\""
},
{
"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=\"1\""
},
{
"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=\"[]\""
}
],
"heading": {
"class": "",
"content": "heading",
"contentContext": {
"tag": "h2",
"class": "heading--first-level margin-0",
"text": "Slider heading"
}
},
"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": [
{
"content": "image--picture",
"contentContext": {
"defaultSrc": "/images/slider/slider-304_392.jpg",
"sources": [
{
"src": "/images/slider/slider-304_392.jpg",
"mediaQuery": "(max-width: 480px)"
},
{
"src": "/images/slider/slider-752_536.jpg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/slider/slider-944_536.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/slider/slider-1328_536.jpg",
"mediaQuery": ""
}
],
"alt": "slider1"
}
},
{
"content": "image--picture",
"contentContext": {
"defaultSrc": "/images/slider/slider-304_392.jpg",
"sources": [
{
"src": "/images/slider/slider-304_392.jpg",
"mediaQuery": "(max-width: 480px)"
},
{
"src": "/images/slider/slider-752_536.jpg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/slider/slider-944_536.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/slider/slider-1328_536.jpg",
"mediaQuery": ""
}
],
"alt": "slider1"
}
},
{
"content": "image--picture",
"contentContext": {
"defaultSrc": "/images/slider/slider-304_392.jpg",
"sources": [
{
"src": "/images/slider/slider-304_392.jpg",
"mediaQuery": "(max-width: 480px)"
},
{
"src": "/images/slider/slider-752_536.jpg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/slider/slider-944_536.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/slider/slider-1328_536.jpg",
"mediaQuery": ""
}
],
"alt": "slider1"
}
},
{
"content": "image--picture",
"contentContext": {
"defaultSrc": "/images/slider/slider-304_392.jpg",
"sources": [
{
"src": "/images/slider/slider-304_392.jpg",
"mediaQuery": "(max-width: 480px)"
},
{
"src": "/images/slider/slider-752_536.jpg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/slider/slider-944_536.jpg",
"mediaQuery": "(max-width: 1024px)"
},
{
"src": "/images/slider/slider-1328_536.jpg",
"mediaQuery": ""
}
],
"alt": "slider1"
}
}
]
}
.categories-sliderhtml {
.category-grid-item {
padding: 0 $spacer--small;
box-shadow: none;
border-radius: 0;
border: 0;
&__link {
display: flex;
flex-direction: column;
border: 1px solid $blue-light;
border-radius: 0;
&:hover {
.image {
border-color: #b4afc4;
}
}
}
&__image {
padding: 0 0 10px;
background: $white;
border-radius: 0;
border: 0;
img {
border-radius: 0;
}
}
&__content {
margin-top: $spacer--small;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
&__text {
text-transform: none;
font-size: $spacer--medium;
font-weight: 300;
margin: 0;
}
}
}
.slick-arrow {
position: absolute;
z-index: 1;
top: 30%;
height: 33.3333%;
padding: $spacer--medium;
text-indent: -9999999px;
background: rgba(255, 255, 255, 0.4);
border: none;
&:hover {
cursor: pointer;
background: rgba(255, 255, 255, 0.8);
}
&:before {
content: "";
position: absolute;
z-index: 2;
color: #000;
text-indent: 0;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
width: $spacer--medium;
height: $spacer--medium;
}
&.slick-prev {
left: 0;
&:before {
transform: rotate(135deg);
left: $spacer--small;
}
}
&.slick-next {
right: 0;
&:before {
transform: rotate(-45deg);
right: $spacer--small;
}
}
}
(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.