Créer un diaporama, un slider ou un carrousel à partir de vos publications Facebook

Si vous utilisez la version Pro du plugin WordPress Custom Facebook Feed, vous pouvez utiliser notre extension Carousel pour créer des carrousels coulissants à partir de votre contenu Facebook.

Si vous utilisez le plugin WordPress gratuit ou la version PHP Standalone, il est possible de réaliser un diaporama de base en procédant comme suit :

----

1) Ajoutez une classe au shortcode du flux que vous souhaitez convertir en diaporama :

Comments Box SVG iconsUsed for the like, share, comment, and reaction icons
Load more

2) Définissez le nombre d'articles à afficher comme étant le nombre d'articles que vous souhaitez inclure dans le diaporama (10 par exemple). Vous pouvez le faire en utilisant l'option 'num' du shortcode :

Comments Box SVG iconsUsed for the like, share, comment, and reaction icons
Load more

3) Ajoutez le JavaScript suivant à votre site. Cette opération peut être effectuée manuellement à l'aide d'un plugin JavaScript personnalisé. Pour plus d'informations, voir notre documentation ici. Veuillez noter que si vous modifiez l'option de classe dans le shortcode ci-dessus pour qu'elle soit autre chose que "slideshow", assurez-vous de la modifier sur la première ligne du snippet ci-dessous :

var shortcodeClass = 'slideshow',
    cffSpeed = 5000, 
    $cff = $('#cff.'+ shortcodeClass);
    $cffItem = $cff.find('.cff-item'),
    cffNum = $cffItem.length,
    cffCur = 0;
$cffItem.hide();
setTimeout(function(){ $cff.find('.cff-item').eq(0).show(); }, 200);
setInterval(function(){
    $cff.find('.cff-item').eq(cffCur).fadeOut( "fast", function() {
        if( cffCur == cffNum-1 ) cffCur = -1;
        cffCur++;
        $cff.find('.cff-item').eq(cffCur).fadeIn();
    });
}, cffSpeed);

4) Vous pouvez modifier la vitesse de la transition en modifiant la valeur cffSpeed = 5000 en haut du snippet. 5000 est égal à 5 secondes (5000ms).

soutien

Vous n'avez pas trouvé votre réponse dans la documentation ?

Contacter le support

Cet article a-t-il été utile ?