Erstellen einer Diashow, eines Schiebereglers oder eines Karussells aus Ihren Facebook-Beiträgen

So verwandeln Sie einen Facebook-Feed mithilfe der „Carousel“-Erweiterung in der Pro-Version des Plugins in ein scrollbares Karussell.

Wenn Sie die Pro-Version des Custom Facebook Feed WordPress Plugins verwenden, können Sie unsere Karussell-Erweiterung verwenden, um Karussells aus Ihren Facebook-Inhalten zu erstellen.

Wenn Sie das kostenlose WordPress-Plugin oder die PHP-Standalone-Version verwenden, können Sie eine einfache Diashow wie folgt erstellen:

1) Fügen Sie dem Shortcode des Feeds, den Sie in eine Diashow umwandeln möchten, eine Klasse hinzu:

[custom-facebook-feed class="slideshow"]

2) Stellen Sie die Anzahl der anzuzeigenden Beiträge auf die Anzahl der Beiträge ein, die Sie in die Diashow aufnehmen möchten (z. B. 10). Dies können Sie mit der Shortcode-Option "num" tun:

[custom-facebook-feed class="slideshow" num=10]

3) Fügen Sie das folgende JavaScript zu Ihrer Website hinzu . Dies kann manuell mit einem benutzerdefinierten JavaScript-Plugin durchgeführt werden. Weitere Informationen finden Sie in unserer Dokumentation hier. Bitte beachten Sie, wenn Sie die Class-Option im obigen Shortcode in etwas anderes als "Slideshow" ändern, stellen Sie sicher, dass Sie das in der ersten Zeile des unten stehenden Snippets ändern:

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) Sie können die Geschwindigkeit des Übergangs ändern, indem Sie den Wert cffSpeed = 5000 am oberen Rand des Snippets bearbeiten. 5000 ist gleich 5 Sekunden (5000ms).

Unterstützung

Konnten Sie die Antwort nicht in den Dokumenten finden?

Kontakt zum Support