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 month ago

Smash Balloon

Want to get more Instagram reel views?

Viral reels can get featured on the Explore page, which is where 50% of Instagram users go to discover new content monthly.

In this video, we’ll share tips to help your Instagram reels get more viewers.

... See MoreSee Less

Video image

Comment on Facebook

2 months ago

Smash Balloon

Do you have a YouTube channel you want to grow?

In this video, we share 5 of our best methods to help you increase the watch hours for your YouTube channel!

... See MoreSee Less

Video image

Comment on Facebook

3 months ago

Smash Balloon

▶️ YouTube shorts are short-form videos that can easily engage viewers with bite-sized content and keep them watching for more.

But if you’re not used to coding, embedding YouTube shorts can be tough.

In this video, you will learn how to embed YouTube Shorts on your WordPress website in a beautiful feed using the Smash Balloon YouTube Feed Pro plugin.

... See MoreSee Less

Video image

Comment on Facebook

4 months ago

Smash Balloon

Ever wanted to showcase your YouTube live streams on your website?

Here's a quick video tutorial to help you:
▶️
... See MoreSee Less

Video image

Comment on Facebook

Is there a way to include YouTube live chat in the live stream embed?

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 month ago

Smash Balloon

Want to get more Instagram reel views?

Viral reels can get featured on the Explore page, which is where 50% of Instagram users go to discover new content monthly.

In this video, we’ll share tips to help your Instagram reels get more viewers.

... See MoreSee Less

Video image

Comment on Facebook

2 months ago

Smash Balloon

Do you have a YouTube channel you want to grow?

In this video, we share 5 of our best methods to help you increase the watch hours for your YouTube channel!

... See MoreSee Less

Video image

Comment on Facebook

3 months ago

Smash Balloon

▶️ YouTube shorts are short-form videos that can easily engage viewers with bite-sized content and keep them watching for more.

But if you’re not used to coding, embedding YouTube shorts can be tough.

In this video, you will learn how to embed YouTube Shorts on your WordPress website in a beautiful feed using the Smash Balloon YouTube Feed Pro plugin.

... See MoreSee Less

Video image

Comment on Facebook

4 months ago

Smash Balloon

Ever wanted to showcase your YouTube live streams on your website?

Here's a quick video tutorial to help you:
▶️
... See MoreSee Less

Video image

Comment on Facebook

Is there a way to include YouTube live chat in the live stream embed?

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?