<div class="slider slider--products" data-mobile-first="true" data-infinite="false" data-center-mode="false" data-dots="true" data-autoplay="false" data-autoplay-speed="3000" data-pause-on-focus="true" data-pause-on-hover="true" data-slides-to-show="2"
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": 3, "slidesToScroll": 1, "dots": false}}, {"breakpoint": 1023, "settings": {"slidesToShow": 4, "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__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">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Long product name can have maximum 50 caractere...
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value price__value--old product-grid-item__old-price">
<del aria-label="Price reduced from: $1000.00">
$
1000.00
</del>
</span>
<span class="price__value price__value--special product-grid-item__special-price">
<ins aria-label="On sale at: $899.99">
$
899.99
</ins>
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Add to cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class=" slider__item slider__slide-item">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Long product name can have maximum 50 caractere...
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value price__value--old product-grid-item__old-price">
<del aria-label="Price reduced from: $1000.00">
$
1000.00
</del>
</span>
<span class="price__value price__value--special product-grid-item__special-price">
<ins aria-label="On sale at: $899.99">
$
899.99
</ins>
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Add to cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class=" slider__item slider__slide-item">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Some product name Lorem Ipsum Dolor sit
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value price__value--old product-grid-item__old-price">
<del aria-label="Price reduced from: $1000.00">
$
1000.00
</del>
</span>
<span class="price__value price__value--special product-grid-item__special-price">
<ins aria-label="On sale at: $899.99">
$
899.99
</ins>
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Add to cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class=" slider__item slider__slide-item">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Some product name
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: $1000.00">
$
1000.00
</del>
</span>
<span class="price__value price__value--special ">
<ins aria-label="On sale at: $899.99">
$
899.99
</ins>
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Add to cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class=" slider__item slider__slide-item">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Long product name can have maximum 50 caractere...
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: $1000.00">
$
1000.00
</del>
</span>
<span class="price__value price__value--special ">
<ins aria-label="On sale at: $899.99">
$
899.99
</ins>
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Add to cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class=" slider__item slider__slide-item">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Some product name
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value price__value--old product-grid-item__old-price">
<del aria-label="Price reduced from: $1000.00">
$
1000.00
</del>
</span>
<span class="price__value price__value--special product-grid-item__special-price">
<ins aria-label="On sale at: $899.99">
$
899.99
</ins>
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Add to cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
<div class=" slider__item slider__slide-item">
<div class="product-grid-item product-grid-item--slider-item" tabindex="0">
<a href="#" class="product-grid-item__link" tabindex="-1">
<div class="badges product-grid-item__badges">
<div class="badge ">
-15%
</div>
<div class="badge badge--new">
New
</div>
</div>
<div class="lazyload-wrapper product-grid-item__image-wrapper">
<img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/product/product-368_552.jpg" alt="image alt text">
</div>
</a>
<section class="product-grid-item__details">
<div class="rating product-grid-item__rating rating--secondary" aria-label="Average rating: 72%" title="Average rating: 72%" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<h2 class="product-grid-item__name">
<a href="#" class="product-grid-item__name-link">
Long product name can have maximum 50 caractere...
</a>
</h2>
<div class="swatch__container swatch__container--catalog">
<div class="swatch ">
<div class="swatch__wrapper" aria-label="Color" tabindex="0" aria-activedescendant="opt-color-red-3" aria-required="true" role="listbox" aria-invalid="false">
<div class="swatch__option-container " id="opt-color-orange-1" aria-label="Orange" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #ffa500">
</div>
</div>
<div class="swatch__option-container " id="opt-color-green-2" aria-label="Green" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #00ff00">
</div>
</div>
<div class="swatch__option-container selected" id="opt-color-red-3" aria-label="Red" tabindex="0" role="option" aria-selected="true">
<div class="swatch__option " style="background-color: #ff0000">
</div>
</div>
<div class="swatch__option-container " id="opt-color-black-4" aria-label="White" tabindex="0" role="option" aria-selected="false">
<div class="swatch__option " style="background-color: #000000">
</div>
</div>
</div>
</div>
<script src="/components/raw/swatch/swatch.js"></script>
</div>
<div class="product-grid-item__details-bottom">
<div class="product-grid-item__price ">
<div class="price ">
<span class="price__value price__value--old product-grid-item__old-price">
<del aria-label="Price reduced from: $1000.00">
$
1000.00
</del>
</span>
<span class="price__value price__value--special product-grid-item__special-price">
<ins aria-label="On sale at: $899.99">
$
899.99
</ins>
</span>
</div>
</div>
<div class="product-grid-item__actions ">
<div class="product-grid-item__secondary-action">
<button class="button button--icon add-to-wishlist" type="button" aria-label="Add to Wish List">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon " type="button" aria-label="Add to compare">
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
</button>
</div>
<form action="#" class="product-grid-item__primary-action">
<button class="button button--add-to button--add-to" type="submit" aria-label="Add to cart">
<span class="button__text ">
Add to cart
</span>
<svg
class="icon button__icon"
role="presentation"
focusable="false"
>
<title>Add to cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</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": "slider--products",
"attributes": [
{
"attr": "data-mobile-first=\"true\""
},
{
"attr": "data-infinite=\"false\""
},
{
"attr": "data-center-mode=\"false\""
},
{
"attr": "data-dots=\"true\""
},
{
"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=\"2\""
},
{
"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\": 3, \"slidesToScroll\": 1, \"dots\": false}}, {\"breakpoint\": 1023, \"settings\": {\"slidesToShow\": 4, \"slidesToScroll\": 1, \"dots\": false}}]'"
}
],
"heading": false,
"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": "product-grid-item--slider-item"
},
{
"itemClass": "slider__slide-item",
"content": "product-grid-item--slider-item"
},
{
"itemClass": "slider__slide-item",
"content": "product-grid-item--slider-item",
"contentContext": {
"name": "Some product name Lorem Ipsum Dolor sit"
}
},
{
"itemClass": "slider__slide-item",
"content": "product-grid-item--slider-item",
"contentContext": {
"name": "Some product name",
"price": {
"name": "price--with-special-price",
"context": {
"oldPriceClass": "",
"regularPrice": "1000.00",
"specialPrice": "899.99",
"specialPriceClass": "",
"prefix": {
"tag": "",
"text": "$"
},
"suffix": {
"tag": "",
"text": ""
}
}
}
}
},
{
"itemClass": "slider__slide-item",
"content": "product-grid-item--slider-item"
},
{
"itemClass": "slider__slide-item",
"content": "product-grid-item--slider-item",
"contentContext": {
"name": "Some product name",
"price": {
"name": "price--with-special-price",
"context": {
"oldPriceClass": "product-grid-item__old-price",
"regularPrice": "1000.00",
"specialPrice": "899.99",
"specialPriceClass": "product-grid-item__special-price",
"prefix": {
"tag": "",
"text": "$"
},
"suffix": {
"tag": "",
"text": ""
}
}
}
}
},
{
"itemClass": "slider__slide-item",
"content": "product-grid-item--slider-item"
}
]
}
$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;
}
}
(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.