vCarousel
-
Exemple d'utilisation simple : lorsqu'une vidéo se termine, la suivante la remplace, prête à être lancée. Lorsqu'une vidéo est sélectionnée dans le menu, sa lecture se lance automatiquement. Cliquez-ici pour voir un autre exemple d'utilisation où vCarousel est associé à un carrousel d'images Flickity.
+
Exemple d’utilisation simple : lorsqu’une vidéo se termine, la suivante la remplace et sa lecture est lancée, ceci jusqu’à ce que toutes les vidéos aient été parcourues. Cliquez-ici pour voir un autre exemple d’utilisation où vCarousel est associé à un carrousel d’images Flickity.
diff --git a/src/example.ts b/src/example.ts
index 7276c3e..6743291 100644
--- a/src/example.ts
+++ b/src/example.ts
@@ -9,16 +9,17 @@ try
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!=="")
+ if(window.location.hash !== undefined && window.location.hash !== "")
testvCarousel.firstVideoId=window.location.hash.replace("#","");
// On lance le carrousel :
+ testvCarousel.playNextVideos=true;
testvCarousel.run();
// Dans le cas où l'utilisateur clique 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=selectLinks[i];
+ const link=selectLinks[i];
link.addEventListener("click", function(e)
{
testvCarousel.firstVideoId=link.hash.replace("#","");
diff --git a/src/exampleFlickity.ts b/src/exampleFlickity.ts
index eaf1baa..d236f00 100644
--- a/src/exampleFlickity.ts
+++ b/src/exampleFlickity.ts
@@ -1,20 +1,20 @@
// Exemple d'utilisation de vCarousel avec 3 vidéos, proposées via un carrousel d'images Flickity
-const Flickity = require("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(let cel of flickityCarousel.cells)
+ // On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash :
+ for(const cel of flickityCarousel.cells)
{
- let childrens = cel.element.childNodes;
- for (let i = 0, c = childrens.length; i < c; i++)
+ 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)
+ if(childrens[i].hash !== undefined && childrens[i].hash === urlHash)
{
flickityCarousel.select(nb);// API Flickity : https://flickity.metafizzy.co/api.html
find=true;
@@ -24,15 +24,15 @@ const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
}
nb++;
}
- if(find===false)
+ 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,
+ const imgCarousel=document.querySelector(".img-carousel");
+ const flktyCarousel=new Flickity(imgCarousel,
{
// options : https://flickity.metafizzy.co/options.html
accessibility: true,
@@ -48,7 +48,7 @@ try
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!=="")
+ if(window.location.hash !== undefined && window.location.hash !=="")
{
testvCarousel.firstVideoId=window.location.hash.replace("#","");
selectFlickityForHash(flktyCarousel, location.hash);
@@ -68,6 +68,7 @@ try
// ici on demande la lecture automatique de toutes les vidéos :
testvCarousel.playFirstVideo=true;
testvCarousel.playNextVideos=true;
+ testvCarousel.noStop=true;
testvCarousel.run();
});
}