<!-- Error rendering component: -->
<div class="slider js-slider">
<div class="slider__button slider__button--left js-slider-control js-left">
{{ render '@icon' iconLeft }}
</div>
<div class="slider__inner js-slider-area">
{{#each catalogitems }}
{{ render '@catalog-item' this merge=true }}
{{/each}}
</div>
<div class="slider__button slider__button--right js-slider-control js-right">
{{ render '@icon' iconRight }}
</div>
</div>
<script src="{{static 'product-slider.js' }}"></script>
{
"iconLeft": {
"id": "angle-left",
"class": "slider__button--icon"
},
"iconRight": {
"id": "angle-right",
"class": "slider__button--icon"
},
"catalogitems": [
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width",
"name": "Text a ultra long text title field cause we need to have all the blocks in the same position cause we love that"
},
{
"class": "catalog-item--fixed-width red",
"badge": {
"name": "badge--new",
"context": {
"class": "badge catalog-item__badge catalog-item__badge--black",
"text": ""
}
}
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width black"
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width"
},
{
"class": "catalog-item--fixed-width"
}
]
}
(function() { // eslint-disable-line
'use strict'
const sliderAreas = [...document.querySelectorAll('.js-slider')];
class slider {
constructor(sliderElement) {
this.buttonLeft = sliderElement.querySelector('.js-left');
this.buttonRight = sliderElement.querySelector('.js-right');
this.sliderArea = sliderElement.querySelector('.js-slider-area');
this.sliderAreaWidth = sliderElement.clientWidth;
this.buttonRight.addEventListener('click', (e) => {
this.scroll(e, 'right');
});
this.buttonLeft.addEventListener('click', (e) => {
this.scroll(e, 'left');
});
}
scroll(event, direction) {
event.preventDefault();
if (direction == 'left') {
this.sliderArea.scrollLeft -= this.sliderAreaWidth;
this.handleButtons();
return;
}
this.sliderArea.scrollLeft += this.sliderAreaWidth;
this.handleButtons();
}
handleButtons() {
const maxScrollLeft = this.sliderArea.scrollWidth - this.sliderArea.clientWidth;
if (this.sliderArea.scrollLeft == 0) {
this.buttonLeft.classList.add('slider__control--disabled');
this.buttonRight.classList.remove('slider__control--disabled');
}
if (this.sliderArea.scrollLeft == maxScrollLeft) {
this.buttonRight.classList.add('slider__control--disabled');
this.buttonLeft.classList.remove('slider__control--disabled');
}
}
}
sliderAreas.forEach(sliderElement => {
new slider(sliderElement);
});
}());
.slider {
position: relative;
overflow: hidden;
transition: $transition-base;
&__inner {
display: grid;
grid-template-columns: repeat(100, 1fr);
grid-auto-columns: 50%;
grid-auto-flow: column;
overflow: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
padding: $spacer--2 0;
@include mq($screen-m) {
overflow: hidden;
}
}
&--responsive {
& .slider__inner {
@include mq($screen-m) {
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
}
@include mq($screen-l) {
grid-template-columns: repeat(100, 1fr);
}
}
}
& .product-item {
scroll-snap-align: center;
width: 235px;
}
&__button {
display: none;
position: absolute;
z-index: 9;
top: 45%;
padding: $spacer;
cursor: pointer;
user-select: none;
background: rgba(255, 255, 255, 0.8);
border: 1px solid $theme-primary;
border-radius: 10px;
@include mq($screen-m) {
display: block;
}
&--left {
left: 0;
}
&--right {
right: 0;
}
&--icon {
fill: $theme-primary;
width: $spacer--25;
height: $spacer--25;
}
}
}
There are no notes for this item.