vCarousel/src/exampleFlickity.ts

// Exemple d'utilisation de vCarousel avec 3 vidéos, proposées via un carrousel d'images Flickity
const Flickity=require("flickity");
import { vCarousel } from "./vCarousel";

// Cette fonction sert à synchroniser si besoin l'image sélectionnée dans le carrousel Flickity avec le hash de l'url.
const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
{
    let nb=0, find=false;
    // On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash :
    for(const cel of flickityCarousel.cells)
    {
        const childrens=cel.element.childNodes;
        for (let i=0, c=childrens.length; i < c; i++)
        {
            if (childrens[i].nodeType === Node.ELEMENT_NODE)
            {
                if(childrens[i].hash !== undefined && childrens[i].hash === urlHash)
                {
                    flickityCarousel.select(nb);// API Flickity : https://flickity.metafizzy.co/api.html
                    find=true;
                    break;
                }
            }
        }
        nb++;
    }
    if(find === false)
        console.error("L'ancre fournie par l'url n'a pas été trouvée dans le carrousel Flickity.");
}

try
{
    // Initialisation Flickity :
    const imgCarousel=document.querySelector(".img-carousel");
    const flktyCarousel=new Flickity(imgCarousel,
    {
      // options : https://flickity.metafizzy.co/options.html
      accessibility: true,
      cellAlign: "center",
      contain: true,
      rightToLeft: true,
      wrapAround: true,
    });

    // Initialisation vCarousel :
    const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
    const testvCarousel=new vCarousel();
    testvCarousel.vContainers=videosContainers;
    
    // Si un id est fourni par l'url, on affiche cette vidéo en premier :
    if(window.location.hash !== undefined && window.location.hash !=="")
    {
        testvCarousel.firstVideoId=window.location.hash.replace("#","");
        selectFlickityForHash(flktyCarousel, location.hash);
    }
    else
        testvCarousel.firstVideoId="";// dans cet exemple, on cache toutes les vidéos avant que l'utilisateur ne fasse son choix dans le carrousel d'images.
    testvCarousel.run();
    
    // Lorsque l'utilisateur clique sur une des images pour sélectionner une vidéo à afficher, on actualise l'affichage :
    let selectLinks=document.querySelectorAll(".selectVideo");
    for (let i = 0; i < selectLinks.length; i++)
    {
        let link=<HTMLAnchorElement>selectLinks[i];
        link.addEventListener("click", function(e)
        {
            testvCarousel.firstVideoId=link.hash.replace("#","");
            // ici on demande la lecture automatique de toutes les vidéos :
            testvCarousel.playFirstVideo=true;
            testvCarousel.playNextVideos=true;
            testvCarousel.noStop=true;
            testvCarousel.run();
        });
    }
    // De même quand le hash change, on adapte l'item sélectionné de flickity
    // Ceci permet de suivre le parcours des vidéos par vCarousel
    window.addEventListener('hashchange', function()
    {
        selectFlickityForHash(flktyCarousel, location.hash);
    });
}
catch(e)
{
    console.error(e);
}