Intégrer Splide à un projet Shopify
Dans le head
<!-- Splide : Used for all sliders on the website -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css" as="style">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">A la fin du body
<!-- Splide : Used for all sliders on the website -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4/dist/js/splide.js"></script>Pensez à créer les fichiers d'assets en local pour de meilleurs performances
Alternative fichiers locaux (head)
{{ 'splide.min.css' | asset_url | stylesheet_tag }}Alternative fichiers locaux (body)
<!-- Splide : Used for all sliders on the website -->
<script src="{{ 'splide.js' | asset_url }}" defer="defer"></script>Utilisation dans les sections
<div class="mm-splide splide splide-{{ section.id }}">
<div class="splide__track">
<ul class="splide__list">
{% for product in section.settings.collection.products %}
<li class="splide__slide">
{% render 'mm-product-card', product: product %}
</li>
{% endfor %}
</ul>
</div>
</div>
<script>
document.addEventListener( 'DOMContentLoaded', function () {
var id = '.splide-{{section.id}}';
var splideElem = document.querySelector(id);
new Splide( splideElem, {
type : 'slide',
arrows: false,
pagination: false,
gap: 20,
perPage: 4,
padding: {
right: '10rem',
left: '20px'
},
breakpoints: {
768: {
perPage: 2,
}
}
}).mount();
});
</script>