Sections
Slider Instafeed

Slider avec l'app instafeed

MAJ Conf 2024


/* Script mm-scroll-grab-instafeed.js */ 
document.addEventListener("DOMContentLoaded", () => {
    waitForElement();
});
 
/* L'apps instafeed chargent les images à la fin de la page du coup on check si les items on été 
créé + ajout timer avant de lancer la fonction*/
function waitForElement(){
    if(document.querySelector("#insta-feed>div") != null){
        mmScroll()
    }
    else{
        setTimeout(waitForElement, 2000);
    }
}
function mmScroll() {
    var slider = document.querySelector("#insta-feed>div");
    let isDown = false;
    let startX;
    let scrollLeft;
 
    slider.addEventListener("mousedown", (e) => {
        isDown = true;
        slider.classList.add("active");
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
    });
    slider.addEventListener("mouseleave", () => {
        isDown = false;
        slider.classList.remove("active");
    });
    slider.addEventListener("mouseup", () => {
        isDown = false;
        slider.classList.remove("active");
    });
    slider.addEventListener("mousemove", (e) => {
        if (!isDown) return;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * 3; //scroll-fast
        slider.scrollLeft = scrollLeft - walk;
    });
}
{{ 'mm-instafeed.css' | asset_url | stylesheet_tag }}
<script src="{{ 'mm-scroll-grab.js' | asset_url }}" async></script>
 
<div class="mm-section-{{ section.id }} mm-instafeed-section">
    <div class="mm-instafeed-header mm-flex mm-justify-between">
        <h3 class="mm-0">{{ section.settings.title | upcase  }}</h3>
        <div class="mm-0 mm-technic-fields">{{ section.settings.subtitle | upcase }}</div>
    </div>
    <div class="mm-instafeed">
        <div id="insta-feed"></div>
    </div>
</div>

Exemple sur le site Coral Gardener