Docs    Facebook    Customizations

Creating a slideshow, slider, or carousel from your Facebook posts

If you’re using the Pro version of the Custom Facebook Feed WordPress plugin then you can use our Carousel extension to create sliding carousels out of your Facebook content.

If you’re using the free WordPress plugin, or the PHP Standalone version, then it’s possible to achieve a basic slideshow by doing the following:

————

1) Add a class to the shortcode of the feed that you want to convert into a slideshow:

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

1 week ago

Smash Balloon

Check out MemberPress and the new ChatGPT integration!The Uncanny Automator-powered #MemberPress + OpenAI ChatGpt Integration is HERE! 🚀

Turn your ⏰ time-consuming content-creating tasks over to #ChatGPT & put AI to work for your WordPress online business 👉 memberpress.com/cgpt-guide
... See MoreSee Less

Check out MemberPress and the new ChatGPT integration!

3 weeks ago

Smash Balloon

Want to easily embed reviews from Google, Facebook, Tripadvisor, and Yelp on your WordPress website?

Find out how to do this in just 4 minutes in our video tutorial:
... See MoreSee Less

Video image

Comment on Facebook

We have a problem. It's impossible connect the account ig. Help me please

1 month ago

Smash Balloon

Want more people to join your #Facebook events? 🤔

Spice things up by embedding Facebook events on your #wordpress site!

Since your visitors are already interested in your brand, you can easily have a packed house for your events this way.

Our new video shows you how it's done:
... See MoreSee Less

Video image

Comment on Facebook

Please check your support tickets as soon as possible.

2 months ago

Smash Balloon

Did you know that 65% of people are visual learners? 👀

By embedding your #instagram feed, you can give people an easier way to learn about your brand.

The best part? You can do this for free!

Check out our new video below to get started right away: 👇

... See MoreSee Less

Video image

Comment on Facebook

Load more

2) Set the number of posts to display to be the number of posts you want to include in the slideshow (10 for example). You can do this by using the ‘num’ shortcode option:

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

1 week ago

Smash Balloon

Check out MemberPress and the new ChatGPT integration!The Uncanny Automator-powered #MemberPress + OpenAI ChatGpt Integration is HERE! 🚀

Turn your ⏰ time-consuming content-creating tasks over to #ChatGPT & put AI to work for your WordPress online business 👉 memberpress.com/cgpt-guide
... See MoreSee Less

Check out MemberPress and the new ChatGPT integration!

3 weeks ago

Smash Balloon

Want to easily embed reviews from Google, Facebook, Tripadvisor, and Yelp on your WordPress website?

Find out how to do this in just 4 minutes in our video tutorial:
... See MoreSee Less

Video image

Comment on Facebook

We have a problem. It's impossible connect the account ig. Help me please

1 month ago

Smash Balloon

Want more people to join your #Facebook events? 🤔

Spice things up by embedding Facebook events on your #wordpress site!

Since your visitors are already interested in your brand, you can easily have a packed house for your events this way.

Our new video shows you how it's done:
... See MoreSee Less

Video image

Comment on Facebook

Please check your support tickets as soon as possible.

2 months ago

Smash Balloon

Did you know that 65% of people are visual learners? 👀

By embedding your #instagram feed, you can give people an easier way to learn about your brand.

The best part? You can do this for free!

Check out our new video below to get started right away: 👇

... See MoreSee Less

Video image

Comment on Facebook

Load more

3) Add the following JavaScript to your site. This can be done manually using a custom JavaScript plugin. For further information see our documentation here. Please note, if you change the class option in the shortcode above to be anything but “slideshow” then make sure to change that on the first line of the snippet below:

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) You can change the speed of the transition by editing the cffSpeed = 5000 value at the top of the snippet. 5000 is equal to 5 seconds (5000ms).

support

Couldn’t find your answer in the docs?

Contact Support

Was this article helpful?