How to use Facebook Feed Carousel Widget of Sky Addons for Elementor

The Sky Addons Facebook Feed Carousel widget displays your Facebook Page posts inside a smooth Swiper carousel — bringing the same smart caching, two layout styles, and rich post rendering as the Facebook Feed Grid widget, but in a horizontally scrollable format with navigation arrows, pagination, and per-slide Active state styling. It is the ideal choice when you want to feature your social content prominently without consuming the full width of the page. This documentation will guide you through the process of using the Facebook Feed Carousel Widget to create an engaging, auto-playing social media carousel on your website.

Features:

1. Two Layout Styles: Classic Post and Card (E-commerce) — the same styles as the Facebook Feed Grid, now inside a carousel.
2. Swiper Carousel Engine: Autoplay, loop, speed, space between, and multiple slide effects — all configurable from the Carousel Settings section.
3. Navigation and Pagination: Optional prev/next arrow buttons and dot/fraction pagination with full style control.
4. Active Slide Styling: A dedicated Active tab on the carousel Item style lets you scale, recolor, or shadow the centered slide to give it a focal-point effect.
5. Shared Caching Layer: API responses are cached in WordPress transients on the same schedule as the grid widget — no extra API calls for the carousel.
6. Global or Per-Widget Credentials: Use the site-wide Facebook API settings or override them per widget instance.
7. Responsive Columns: Different slidesPerView values per breakpoint so the carousel always fits the screen.

Insert Facebook Feed Carousel Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Facebook Feed Carousel in the widget panel and drag it onto the canvas.

Configure Layout

The Layout section sets the visual style and number of visible slides.

1. Layout Style: Choose Classic Post for a social-card look with author, text, images, and engagement row, or Card (E-commerce) for a product-card layout with a prominent image and CTA.
2. Columns: How many slides to show simultaneously per breakpoint (desktop defaults to 3, tablet to 2, mobile to 1). This drives Swiper’s slidesPerView.

Configure Facebook Source

The Facebook Source section connects the widget to the Facebook Graph API. The controls are identical to those on the Facebook Feed Grid widget.

1. API Source: Global uses the credentials in Sky Addons → Settings → API → Facebook. Custom lets you enter a Page ID and Access Token directly on this widget.
2. Cache Feed: Keep enabled to store the API response and images as WordPress transients.
3. Refresh Cache Every: How often cached data is refreshed (30 minutes to 7 days).

Configure Feed Display Options

The Feed section controls the number of posts and which elements are shown inside each slide. (The Load More button is not available in carousel mode.)

1. Number of Posts: Total slides to include in the carousel.
2. Author Image / Author Name / Verified Badge / Date: Toggle header elements on or off.
3. Post Text / Word Limit / Read More: Show the post message, truncate it, and choose whether “See more” expands inline or links to Facebook.
4. Post Image / Max Images (album): Show post images and set how many album photos are visible before collapsing to a “+N” tile.
5. Engagement (Classic Post): Reactions, comments count, shares count, and Like / Comment / Share action buttons.
6. Card Buttons (E-commerce Card): Share button, Facebook icon, and CTA button with custom label.

Configure Carousel Settings

The Carousel Settings, Navigation, and Pagination sections expose the full Swiper configuration.

1. Carousel Settings: Autoplay toggle and delay, loop, transition speed, space between slides, and slide effect (slide, fade, coverflow, etc.).
2. Navigation: Enable prev/next arrows, choose their icon, and control their position.
3. Pagination: Enable dot bullets or fraction text and control their position.

Style Your Facebook Feed Carousel

Use the Style tab to customise every visual element of the carousel.

1. Item:
   Accent color, border radius, padding, border, and state transition duration. Normal tab (background, box shadow, opacity), Hover tab (background, box shadow, opacity), and Active tab (background, box shadow, opacity, scale) for the centered slide.
2. Author:
   Typography, color, and spacing for the page name and avatar area.
3. Date:
   Typography and color for the post date.
4. Text:
   Typography, color, and “See more / See less” link style.
5. Image:
   Border radius, aspect ratio, and object-fit controls.
6. Engagement:
   Icon color, count typography, and row spacing.
7. Card Button:
   Typography, padding, border, radius, background, and text color.
8. Navigation:
   Arrow size, color, background, border, and hover states.
9. Pagination:
   Dot size, color, active color, and spacing.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your Facebook Feed Carousel widget in action.

Best Practices

1. Use the Active item state to apply a subtle scale (e.g., 1.02) and elevated box shadow to the centered slide — this draws the eye without drastically altering the layout.
2. Set autoplay delay to 5–7 seconds for content-heavy Classic Post slides so readers have time to skim the text before the slide advances.
3. Store your Page Access Token globally in Sky Addons settings to avoid duplicating credentials across multiple widgets on the site.
4. Keep the Number of Posts to 9–12 for carousels — too many slides can make the widget feel endless, and all extra posts still come from the cached set so there is no performance benefit to loading more.

Troubleshooting

1. No slides appear: Check your Facebook credentials — an expired or invalid Page Access Token is the most common cause. Make sure the token has pages_read_engagement permissions and that the Page ID is correct.
2. Carousel does not loop: Loop requires that the total number of posts is greater than the Columns (slidesPerView) value. If Number of Posts equals or is less than Columns, Swiper has nothing to loop over.
3. Navigation arrows are not visible: The arrows may be positioned outside the widget’s overflow boundary. Try enabling the Match Spacing (if available) or add padding to the widget container so the arrows have room to render.

Frequently Asked Questions

What is the difference between Facebook Feed Carousel and Facebook Feed Grid?

The Grid shows all posts simultaneously in a static multi-column layout. The Carousel wraps posts in a Swiper slider with autoplay, navigation arrows, pagination, and per-slide Active state styling. Use the Grid for overview sections and the Carousel for hero or sidebar areas where horizontal scrolling is a feature.

Does the Carousel share the same API cache as the Grid?

Yes. Both widgets use the same transient cache keyed to the Facebook Page. If both widgets are on the same page and using the same credentials, only one API call is made to populate the cache.

Can I set different column counts per device?

Yes. The Columns control is responsive — click the device icon in Elementor’s panel to set a different value for desktop, tablet, and mobile. These drive Swiper’s per-breakpoint slidesPerView setting.

How does the Active slide state work?

Swiper adds a swiper-slide-active class to the currently centered slide. The Active tab in the Item Style section lets you apply a distinct background, box shadow, opacity, and scale to that slide — visually separating it from the adjacent slides.

Can I disable autoplay and let users scroll manually?

Yes. In the Carousel Settings section, turn off the Autoplay toggle. The carousel will remain interactive via touch/drag and the navigation arrows, but will not advance on its own.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Facebook Feed Carousel widget:

• Facebook Feed: Show the same Facebook posts in a static, masonry-compatible grid.
• Instagram Feed: A similar social feed carousel for Instagram Business accounts.
• Generic Carousel: A general-purpose Swiper carousel for any post type.

Conclusion

The Facebook Feed Carousel widget gives you a polished, interactive way to feature your Facebook Page content without dedicating a full-width grid section to it. The shared caching layer keeps it fast, the Active slide state makes it visually compelling, and the full Swiper controls give you the flexibility to match it to any page design. If you have any questions or need help, visit the Sky Addons support center.