<div class="carousel-product container">
<h2 class="alt--color">Nos nouveautés</h2>
<div class="carousel-product__controlers">
<button class="js-go-to-prev" disabled="disabled">
<span class="visually-hidden">Afficher les produits précédents</span>
</button>
<button class="js-go-to-next">
<span class="visually-hidden">Afficher les produits suivants</span>
</button>
</div>
<div class="product-carousel" id="sliderNosNouveautes">
<div>
<article class="card card-product">
<a href="" aria-label="Produit pour chat - Versele Laga Senior" title="Produit pour chat - Versele Laga Senior">
<div class="card-product__thumbnail">
<img src="/img/friandise-cheval.png" />
</div>
<div class="card-product__description">
<span>Cheval</span>
<h4 class="alt--font">Reverdy friandises cheval vanille 3,5 kg</h4>
</div>
<button class="card-product__heart js-add-to-current-list">
<svg class="svg-heart" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path class="svg-heart-body" d="M28.083 13.519L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#F05D61" fill-rule="nonzero"/><path class="svg-heart-shadow" d="M13.567 24.563L25.887 12c1.169-1.19 2-2.524 2.495-4a8.948 8.948 0 0 0 .343-4.469l2.589 3.75-.718 3.907-2.214 4.156-11.696 11.625-3.119-2.407z" fill="#D4484C"/><ellipse class="svg-heart-light" fill="#FFC6C6" cx="6.497" cy="6.655" rx="2.559" ry="4.341"/><path class="svg-heart-border" d="M28.9 1.919c-3.4-2.9-8.484-2.419-11.64.844l-1.229 1.274-1.229-1.268C12.257.13 7.124-1.456 3.162 1.919-.754 5.269-.96 11.28 2.546 14.906l12.07 12.488c.387.4.898.606 1.41.606.511 0 1.023-.2 1.41-.606l12.07-12.488c3.518-3.625 3.312-9.637-.605-12.987zm-.817 11.6L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#4C4636" fill-rule="nonzero"/>
</g>
</svg>
<span class="visually-hidden">Ajouter le produit à ma liste</span>
<span>272</span>
<span class="visually-hidden">clients ont déjà ajoutés ce produit à leur liste.</span>
</button>
<div class="card-product__tools">
<button class="js-display-list-dropdown">
Ajouter à <span class="visually-hidden">l'une de mes listes.</span>
<ul class="list--products-list">
<span></span>
<form>
<label>Ajouter une liste</label>
<span>
<input type="text" name="Titre de la liste" />
<object><button class="button button--tertiary button--shadow"><i class="icon icon--plus"></i></button></object>
</span>
</form>
</ul>
</button>
<span>Voir <i class="icon icon--chevron-right"></i></span>
</div>
</a>
</article>
</div>
<div>
<article class="card card-product">
<a href="" aria-label="Produit pour chat - Versele Laga Senior" title="Produit pour chat - Versele Laga Senior">
<div class="card-product__thumbnail">
<img src="/img/friandise-cheval.png" />
</div>
<div class="card-product__description">
<span>Cheval</span>
<h4 class="alt--font">Reverdy friandises cheval vanille 3,5 kg</h4>
</div>
<button class="card-product__heart js-add-to-current-list">
<svg class="svg-heart" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path class="svg-heart-body" d="M28.083 13.519L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#F05D61" fill-rule="nonzero"/><path class="svg-heart-shadow" d="M13.567 24.563L25.887 12c1.169-1.19 2-2.524 2.495-4a8.948 8.948 0 0 0 .343-4.469l2.589 3.75-.718 3.907-2.214 4.156-11.696 11.625-3.119-2.407z" fill="#D4484C"/><ellipse class="svg-heart-light" fill="#FFC6C6" cx="6.497" cy="6.655" rx="2.559" ry="4.341"/><path class="svg-heart-border" d="M28.9 1.919c-3.4-2.9-8.484-2.419-11.64.844l-1.229 1.274-1.229-1.268C12.257.13 7.124-1.456 3.162 1.919-.754 5.269-.96 11.28 2.546 14.906l12.07 12.488c.387.4.898.606 1.41.606.511 0 1.023-.2 1.41-.606l12.07-12.488c3.518-3.625 3.312-9.637-.605-12.987zm-.817 11.6L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#4C4636" fill-rule="nonzero"/>
</g>
</svg>
<span class="visually-hidden">Ajouter le produit à ma liste</span>
<span>272</span>
<span class="visually-hidden">clients ont déjà ajoutés ce produit à leur liste.</span>
</button>
<div class="card-product__tools">
<button class="js-display-list-dropdown">
Ajouter à <span class="visually-hidden">l'une de mes listes.</span>
<ul class="list--products-list">
<span></span>
<form>
<label>Ajouter une liste</label>
<span>
<input type="text" name="Titre de la liste" />
<object><button class="button button--tertiary button--shadow"><i class="icon icon--plus"></i></button></object>
</span>
</form>
</ul>
</button>
<span>Voir <i class="icon icon--chevron-right"></i></span>
</div>
</a>
</article>
</div>
<div>
<article class="card card-product">
<a href="" aria-label="Produit pour chat - Versele Laga Senior" title="Produit pour chat - Versele Laga Senior">
<div class="card-product__thumbnail">
<img src="/img/friandise-cheval.png" />
</div>
<div class="card-product__description">
<span>Cheval</span>
<h4 class="alt--font">Reverdy friandises cheval vanille 3,5 kg</h4>
</div>
<button class="card-product__heart js-add-to-current-list">
<svg class="svg-heart" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path class="svg-heart-body" d="M28.083 13.519L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#F05D61" fill-rule="nonzero"/><path class="svg-heart-shadow" d="M13.567 24.563L25.887 12c1.169-1.19 2-2.524 2.495-4a8.948 8.948 0 0 0 .343-4.469l2.589 3.75-.718 3.907-2.214 4.156-11.696 11.625-3.119-2.407z" fill="#D4484C"/><ellipse class="svg-heart-light" fill="#FFC6C6" cx="6.497" cy="6.655" rx="2.559" ry="4.341"/><path class="svg-heart-border" d="M28.9 1.919c-3.4-2.9-8.484-2.419-11.64.844l-1.229 1.274-1.229-1.268C12.257.13 7.124-1.456 3.162 1.919-.754 5.269-.96 11.28 2.546 14.906l12.07 12.488c.387.4.898.606 1.41.606.511 0 1.023-.2 1.41-.606l12.07-12.488c3.518-3.625 3.312-9.637-.605-12.987zm-.817 11.6L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#4C4636" fill-rule="nonzero"/>
</g>
</svg>
<span class="visually-hidden">Ajouter le produit à ma liste</span>
<span>272</span>
<span class="visually-hidden">clients ont déjà ajoutés ce produit à leur liste.</span>
</button>
<div class="card-product__tools">
<button class="js-display-list-dropdown">
Ajouter à <span class="visually-hidden">l'une de mes listes.</span>
<ul class="list--products-list">
<span></span>
<form>
<label>Ajouter une liste</label>
<span>
<input type="text" name="Titre de la liste" />
<object><button class="button button--tertiary button--shadow"><i class="icon icon--plus"></i></button></object>
</span>
</form>
</ul>
</button>
<span>Voir <i class="icon icon--chevron-right"></i></span>
</div>
</a>
</article>
</div>
<div>
<article class="card card-product">
<a href="" aria-label="Produit pour chat - Versele Laga Senior" title="Produit pour chat - Versele Laga Senior">
<div class="card-product__thumbnail">
<img src="/img/friandise-cheval.png" />
</div>
<div class="card-product__description">
<span>Cheval</span>
<h4 class="alt--font">Reverdy friandises cheval vanille 3,5 kg</h4>
</div>
<button class="card-product__heart js-add-to-current-list">
<svg class="svg-heart" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path class="svg-heart-body" d="M28.083 13.519L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#F05D61" fill-rule="nonzero"/><path class="svg-heart-shadow" d="M13.567 24.563L25.887 12c1.169-1.19 2-2.524 2.495-4a8.948 8.948 0 0 0 .343-4.469l2.589 3.75-.718 3.907-2.214 4.156-11.696 11.625-3.119-2.407z" fill="#D4484C"/><ellipse class="svg-heart-light" fill="#FFC6C6" cx="6.497" cy="6.655" rx="2.559" ry="4.341"/><path class="svg-heart-border" d="M28.9 1.919c-3.4-2.9-8.484-2.419-11.64.844l-1.229 1.274-1.229-1.268C12.257.13 7.124-1.456 3.162 1.919-.754 5.269-.96 11.28 2.546 14.906l12.07 12.488c.387.4.898.606 1.41.606.511 0 1.023-.2 1.41-.606l12.07-12.488c3.518-3.625 3.312-9.637-.605-12.987zm-.817 11.6L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#4C4636" fill-rule="nonzero"/>
</g>
</svg>
<span class="visually-hidden">Ajouter le produit à ma liste</span>
<span>272</span>
<span class="visually-hidden">clients ont déjà ajoutés ce produit à leur liste.</span>
</button>
<div class="card-product__tools">
<button class="js-display-list-dropdown">
Ajouter à <span class="visually-hidden">l'une de mes listes.</span>
<ul class="list--products-list">
<span></span>
<form>
<label>Ajouter une liste</label>
<span>
<input type="text" name="Titre de la liste" />
<object><button class="button button--tertiary button--shadow"><i class="icon icon--plus"></i></button></object>
</span>
</form>
</ul>
</button>
<span>Voir <i class="icon icon--chevron-right"></i></span>
</div>
</a>
</article>
</div>
<div>
<article class="card card-product">
<a href="" aria-label="Produit pour chat - Versele Laga Senior" title="Produit pour chat - Versele Laga Senior">
<div class="card-product__thumbnail">
<img src="/img/friandise-cheval.png" />
</div>
<div class="card-product__description">
<span>Cheval</span>
<h4 class="alt--font">Reverdy friandises cheval vanille 3,5 kg</h4>
</div>
<button class="card-product__heart js-add-to-current-list">
<svg class="svg-heart" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path class="svg-heart-body" d="M28.083 13.519L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#F05D61" fill-rule="nonzero"/><path class="svg-heart-shadow" d="M13.567 24.563L25.887 12c1.169-1.19 2-2.524 2.495-4a8.948 8.948 0 0 0 .343-4.469l2.589 3.75-.718 3.907-2.214 4.156-11.696 11.625-3.119-2.407z" fill="#D4484C"/><ellipse class="svg-heart-light" fill="#FFC6C6" cx="6.497" cy="6.655" rx="2.559" ry="4.341"/><path class="svg-heart-border" d="M28.9 1.919c-3.4-2.9-8.484-2.419-11.64.844l-1.229 1.274-1.229-1.268C12.257.13 7.124-1.456 3.162 1.919-.754 5.269-.96 11.28 2.546 14.906l12.07 12.488c.387.4.898.606 1.41.606.511 0 1.023-.2 1.41-.606l12.07-12.488c3.518-3.625 3.312-9.637-.605-12.987zm-.817 11.6L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#4C4636" fill-rule="nonzero"/>
</g>
</svg>
<span class="visually-hidden">Ajouter le produit à ma liste</span>
<span>272</span>
<span class="visually-hidden">clients ont déjà ajoutés ce produit à leur liste.</span>
</button>
<div class="card-product__tools">
<button class="js-display-list-dropdown">
Ajouter à <span class="visually-hidden">l'une de mes listes.</span>
<ul class="list--products-list">
<span></span>
<form>
<label>Ajouter une liste</label>
<span>
<input type="text" name="Titre de la liste" />
<object><button class="button button--tertiary button--shadow"><i class="icon icon--plus"></i></button></object>
</span>
</form>
</ul>
</button>
<span>Voir <i class="icon icon--chevron-right"></i></span>
</div>
</a>
</article>
</div>
<div>
<article class="card card-product">
<a href="" aria-label="Produit pour chat - Versele Laga Senior" title="Produit pour chat - Versele Laga Senior">
<div class="card-product__thumbnail">
<img src="/img/friandise-cheval.png" />
</div>
<div class="card-product__description">
<span>Cheval</span>
<h4 class="alt--font">Reverdy friandises cheval vanille 3,5 kg</h4>
</div>
<button class="card-product__heart js-add-to-current-list">
<svg class="svg-heart" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path class="svg-heart-body" d="M28.083 13.519L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#F05D61" fill-rule="nonzero"/><path class="svg-heart-shadow" d="M13.567 24.563L25.887 12c1.169-1.19 2-2.524 2.495-4a8.948 8.948 0 0 0 .343-4.469l2.589 3.75-.718 3.907-2.214 4.156-11.696 11.625-3.119-2.407z" fill="#D4484C"/><ellipse class="svg-heart-light" fill="#FFC6C6" cx="6.497" cy="6.655" rx="2.559" ry="4.341"/><path class="svg-heart-border" d="M28.9 1.919c-3.4-2.9-8.484-2.419-11.64.844l-1.229 1.274-1.229-1.268C12.257.13 7.124-1.456 3.162 1.919-.754 5.269-.96 11.28 2.546 14.906l12.07 12.488c.387.4.898.606 1.41.606.511 0 1.023-.2 1.41-.606l12.07-12.488c3.518-3.625 3.312-9.637-.605-12.987zm-.817 11.6L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#4C4636" fill-rule="nonzero"/>
</g>
</svg>
<span class="visually-hidden">Ajouter le produit à ma liste</span>
<span>272</span>
<span class="visually-hidden">clients ont déjà ajoutés ce produit à leur liste.</span>
</button>
<div class="card-product__tools">
<button class="js-display-list-dropdown">
Ajouter à <span class="visually-hidden">l'une de mes listes.</span>
<ul class="list--products-list">
<span></span>
<form>
<label>Ajouter une liste</label>
<span>
<input type="text" name="Titre de la liste" />
<object><button class="button button--tertiary button--shadow"><i class="icon icon--plus"></i></button></object>
</span>
</form>
</ul>
</button>
<span>Voir <i class="icon icon--chevron-right"></i></span>
</div>
</a>
</article>
</div>
<div>
<article class="card card-product">
<a href="" aria-label="Produit pour chat - Versele Laga Senior" title="Produit pour chat - Versele Laga Senior">
<div class="card-product__thumbnail">
<img src="/img/friandise-cheval.png" />
</div>
<div class="card-product__description">
<span>Cheval</span>
<h4 class="alt--font">Reverdy friandises cheval vanille 3,5 kg</h4>
</div>
<button class="card-product__heart js-add-to-current-list">
<svg class="svg-heart" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path class="svg-heart-body" d="M28.083 13.519L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#F05D61" fill-rule="nonzero"/><path class="svg-heart-shadow" d="M13.567 24.563L25.887 12c1.169-1.19 2-2.524 2.495-4a8.948 8.948 0 0 0 .343-4.469l2.589 3.75-.718 3.907-2.214 4.156-11.696 11.625-3.119-2.407z" fill="#D4484C"/><ellipse class="svg-heart-light" fill="#FFC6C6" cx="6.497" cy="6.655" rx="2.559" ry="4.341"/><path class="svg-heart-border" d="M28.9 1.919c-3.4-2.9-8.484-2.419-11.64.844l-1.229 1.274-1.229-1.268C12.257.13 7.124-1.456 3.162 1.919-.754 5.269-.96 11.28 2.546 14.906l12.07 12.488c.387.4.898.606 1.41.606.511 0 1.023-.2 1.41-.606l12.07-12.488c3.518-3.625 3.312-9.637-.605-12.987zm-.817 11.6L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#4C4636" fill-rule="nonzero"/>
</g>
</svg>
<span class="visually-hidden">Ajouter le produit à ma liste</span>
<span>272</span>
<span class="visually-hidden">clients ont déjà ajoutés ce produit à leur liste.</span>
</button>
<div class="card-product__tools">
<button class="js-display-list-dropdown">
Ajouter à <span class="visually-hidden">l'une de mes listes.</span>
<ul class="list--products-list">
<span></span>
<form>
<label>Ajouter une liste</label>
<span>
<input type="text" name="Titre de la liste" />
<object><button class="button button--tertiary button--shadow"><i class="icon icon--plus"></i></button></object>
</span>
</form>
</ul>
</button>
<span>Voir <i class="icon icon--chevron-right"></i></span>
</div>
</a>
</article>
</div>
<div>
<article class="card card-product">
<a href="" aria-label="Produit pour chat - Versele Laga Senior" title="Produit pour chat - Versele Laga Senior">
<div class="card-product__thumbnail">
<img src="/img/friandise-cheval.png" />
</div>
<div class="card-product__description">
<span>Cheval</span>
<h4 class="alt--font">Reverdy friandises cheval vanille 3,5 kg</h4>
</div>
<button class="card-product__heart js-add-to-current-list">
<svg class="svg-heart" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path class="svg-heart-body" d="M28.083 13.519L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#F05D61" fill-rule="nonzero"/><path class="svg-heart-shadow" d="M13.567 24.563L25.887 12c1.169-1.19 2-2.524 2.495-4a8.948 8.948 0 0 0 .343-4.469l2.589 3.75-.718 3.907-2.214 4.156-11.696 11.625-3.119-2.407z" fill="#D4484C"/><ellipse class="svg-heart-light" fill="#FFC6C6" cx="6.497" cy="6.655" rx="2.559" ry="4.341"/><path class="svg-heart-border" d="M28.9 1.919c-3.4-2.9-8.484-2.419-11.64.844l-1.229 1.274-1.229-1.268C12.257.13 7.124-1.456 3.162 1.919-.754 5.269-.96 11.28 2.546 14.906l12.07 12.488c.387.4.898.606 1.41.606.511 0 1.023-.2 1.41-.606l12.07-12.488c3.518-3.625 3.312-9.637-.605-12.987zm-.817 11.6L16.056 26.006 3.98 13.52c-2.396-2.475-2.895-7.194.48-10.075 3.418-2.925 7.436-.806 8.908.718L16.03 6.92l2.664-2.756c1.447-1.5 5.501-3.626 8.907-.72 3.369 2.876 2.876 7.595.48 10.076z" fill="#4C4636" fill-rule="nonzero"/>
</g>
</svg>
<span class="visually-hidden">Ajouter le produit à ma liste</span>
<span>272</span>
<span class="visually-hidden">clients ont déjà ajoutés ce produit à leur liste.</span>
</button>
<div class="card-product__tools">
<button class="js-display-list-dropdown">
Ajouter à <span class="visually-hidden">l'une de mes listes.</span>
<ul class="list--products-list">
<span></span>
<form>
<label>Ajouter une liste</label>
<span>
<input type="text" name="Titre de la liste" />
<object><button class="button button--tertiary button--shadow"><i class="icon icon--plus"></i></button></object>
</span>
</form>
</ul>
</button>
<span>Voir <i class="icon icon--chevron-right"></i></span>
</div>
</a>
</article>
</div>
</div>
<a href="#" class="carousel-product__button button button--primary button--smaller button--rounded">Afficher <span>la catégorie</span><span class="visually-hidden"> titre de la catégorie en cours</span></a>
</div>
<div class="carousel-product container">
<h2 class="alt--color">{{title}}</h2>
<div class="carousel-product__controlers">
<button class="js-go-to-prev" disabled="disabled">
<span class="visually-hidden">Afficher les produits précédents</span>
</button>
<button class="js-go-to-next">
<span class="visually-hidden">Afficher les produits suivants</span>
</button>
</div>
<div class="product-carousel" id="{{#if sliderID}}{{sliderID}}{{else}}sliderProduct{{/if}}">
<div>{{> @card-product}}</div>
<div>{{> @card-product}}</div>
<div>{{> @card-product}}</div>
<div>{{> @card-product}}</div>
<div>{{> @card-product}}</div>
<div>{{> @card-product}}</div>
<div>{{> @card-product}}</div>
<div>{{> @card-product}}</div>
</div>
<a href="#" class="carousel-product__button button button--primary button--smaller button--rounded">Afficher <span>la catégorie</span><span class="visually-hidden"> titre de la catégorie en cours</span></a>
</div>
{
"title": "Nos nouveautés",
"sliderID": "sliderNosNouveautes"
}
.carousel-product {
& + .carousel-product {
margin-top: $margin-xl;
@include mediaWQuery($media-query-l) { margin-top: $margin-m }
}
// Layout
display: grid;
grid-template-areas: 'title title'
'slide slide'
'button controls';
grid-template-columns: 1fr auto;
> h2 { grid-area: title }
> .carousel-product__controlers { grid-area: controls }
> .tns-outer { grid-area: slide }
> .button { grid-area: button }
@include mediaWQuery($media-query-m) {
grid-template-areas: 'title button controls'
'slide slide slide';
grid-template-columns: 1fr auto auto;
grid-gap: 1rem;
}
.tns-outer {
position: relative;
// Fix carousel in grid width
min-width: 100%;
max-width: 100%;
.tns-controls {
// position: absolute;
// bottom: -36px;
}
}
// Carousel style
@include mediaWQuery($media-query-l) {
.product-carousel { padding-bottom: 3rem }
}
.tns-ovh {
border: 0;
//overflow: initial;
}
.card-product {
.list--products-list {
top: initial;
bottom: 100%;
&::before {
top: initial;
bottom: -9px;
transform: rotate(135deg);
}
> span {
display: flex;
flex-direction: column-reverse;
max-height: 200px;
overflow-y: auto;
}
}
}
.card-product img {
width: calc(100% + 6px)
}
> h2 {
margin: 0;
}
&__button {
height: auto;
align-self: center;
span { display: none }
@include mediaWQuery($media-query-s) {
span { display: inline-block }
}
}
&__controlers {
align-self: center;
margin: 0;
font-size: 0;
padding-left: .5rem;
> button {
background-color: $c-black;
width: 44px;
height: 44px;
border: 0;
padding: 0;
border-radius: 100%;
-webkit-appearance: none;
color: $c-white;
background-repeat: no-repeat;
background-size: 9px auto;
background-position: center;
transition: background-color .3s ease, opacity .3s ease;
font-size: 0;
&:hover, &:focus {
background-color: darken($c-black, 10%);
cursor: pointer;
}
&:disabled {
opacity: .5;
cursor: not-allowed;
&:hover, &:focus { background-color: $c-black }
}
&.js-go-to-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='chevron-left' class='svg-inline--fa fa-chevron-left fa-w-10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M34.5 239L229 44.7a24 24 0 0134 0l22.6 22.7a24 24 0 010 33.9L131.5 256l154 154.8a24 24 0 010 33.8l-22.7 22.7a24 24 0 01-34 0L34.6 273a24 24 0 010-34z'/%3E%3C/svg%3E");
}
&.js-go-to-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='chevron-right' class='svg-inline--fa fa-chevron-right fa-w-10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M285.5 273L91 467.3a24 24 0 01-34 0l-22.6-22.7a24 24 0 010-33.9l154-154.7-154-154.7a24 24 0 010-34l22.7-22.6a24 24 0 0134 0L285.4 239a24 24 0 010 34z'/%3E%3C/svg%3E");
margin-left: .3rem;
}
}
}
}
.archive-category .carousel-product {
}
document.addEventListener('DOMContentLoaded', () => {
let allProductCarousels = document.getElementsByClassName('carousel-product');
let sliderArray = [];
[].slice.call(allProductCarousels).forEach(productCarousel => {
let carousel = productCarousel.getElementsByClassName('product-carousel')[0],
carouselID = carousel.getAttribute('id'),
prevButton = productCarousel.querySelector('.js-go-to-prev'),
nextButton = productCarousel.querySelector('.js-go-to-next');
console.log(prevButton);
var slider = tns({
container: `#${carouselID}`,
items: 1,
slideBy: 1,
controls: false,
controlsText: [
'<span class="visually-hidden">Précédent</span><i class="icon icon--carousel-prev"></i>',
'<span class="visually-hidden">Suivant</span><i class="icon icon--carousel-next"></i>'
],
nav: false,
navPosition: 'bottom',
loop: false,
responsive: {
540 : {
items: 2,
slideBy: 2,
gutter: 20
},
880 : {
items: 3,
slideBy: 3,
},
1200 : {
items: 4,
slideBy: 4,
}
}
});
prevButton.onclick = function () {
slider.goTo('prev');
let sliderState = slider.getInfo();
nextButton.removeAttribute('disabled');
sliderState.index == 0 ? prevButton.setAttribute('disabled', 'disabled') : prevButton.removeAttribute('disabled');
};
nextButton.onclick = function () {
slider.goTo('next');
let sliderState = slider.getInfo();
prevButton.removeAttribute('disabled');
sliderState.index == sliderState.indexCached ? nextButton.setAttribute('disabled', 'disabled') : nextButton.removeAttribute('disabled');
};
})
})
There are no notes for this item.