<div class="slider js-slider">
<div class="slider__button slider__button--left js-slider-control js-left">
<svg class="icon slider__button--icon" role="img">
<use xlink:href="/images/icons-sprite.svg#angle-left"></use>
</svg>
</div>
<div class="slider__inner js-slider-area">
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
<div class="catalog-item " tabindex="0">
<div class="catalog-item__image">
<a href="#" class="" tabindex="-1">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/UFC_MMA_GLOVES.png" alt="image alt text">
</div>
</a>
</div>
<div class="catalog-item__content">
<h2 class="catalog-item__title">
<a href="">UFC MMA Handschoenen zonder duim - Zwart/Wit</a>
</h2>
<div class="catalog-item__price">
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</div>
<div class="catalog-item__actions">
<button class="button button--icon button--plus catalog-item__primary-action" type="button" aria-label="Add to Cart">
<span class="catalog-item__cart-text"></span>
<svg class="icon icons__single-icon button__icon" role="img">
<title>Plus</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="slider__button slider__button--right js-slider-control js-right">
<svg class="icon slider__button--icon" role="img">
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</div>
</div>
<script src="/components/raw/product-slider/product-slider.js"></script>
<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);
}
}
}
& .catalog-item {
scroll-snap-align: center;
width: 230px;
}
&__button {
display: none;
position: absolute;
z-index: 1;
top: 45%;
padding: $spacer;
cursor: pointer;
user-select: none;
@include mq($screen-m) {
display: block;
}
&--left {
left: 0;
}
&--right {
right: 0;
}
&--icon {
fill: $gray;
width: 20px;
height: 20px;
}
}
}
There are no notes for this item.