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

The Sky Addons Instagram Feed Carousel widget takes your Instagram Business or Creator account posts and presents them in a smooth, touch-friendly Swiper carousel. It shares the same Instagram Graph API data layer as the Instagram Feed grid widget — meaning the same cached feed, the same dual-connection support, and the same post options — but wraps it in a fully configurable slider with autoplay, arrow navigation, dot pagination, and per-slide Normal / Hover / Active styling. This documentation will guide you through the process of using the Instagram Feed Carousel Widget to create an engaging, swipeable Instagram showcase on your website.

Features:

1. Swiper-Powered Carousel: Smooth hardware-accelerated sliding with touch and mouse drag support on all devices.
2. 1–5 Visible Columns: Show 1 to 5 slides at once per breakpoint (desktop default: 3, tablet: 2, mobile: 1).
3. Autoplay, Loop, and Speed: Configure autoplay interval, loop behavior, and transition speed directly in the Carousel Settings section.
4. Navigation Arrows: Enable or disable previous/next arrows with full style control over size, color, background, and position.
5. Pagination Dots: Toggle dot or fraction pagination with color and spacing customization.
6. Active Slide Highlight: The centered active slide can be given its own background, box shadow, opacity, and scale — a visual effect unique to carousels that a grid cannot achieve.
7. Same Instagram Source Controls: Uses the identical Instagram Source, Feed, and post-style controls as the grid widget — no need to configure credentials twice.
8. Server-Side Caching: Posts are cached as a WordPress transient (up to 50 posts) so the carousel loads instantly without hitting the Instagram API on every request.

Before You Start — Connect Your Instagram Account

The widget requires a valid API access token. Set this up once and all Instagram widgets on the site share it automatically.

1. In your WordPress dashboard, go to Sky Addons → Settings → API → Instagram.
2. Choose your connection type — Instagram Login (no Facebook needed) or Facebook Page — and paste your Access Token.
3. Save settings. All Instagram widgets on the site will now use these credentials.

Insert Instagram Feed Carousel Widget

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

Configure Layout

The Layout section sets how many slides are visible at once.

1. Columns: Select 1 to 5 columns per breakpoint. This drives the Swiper slidesPerView value (desktop default: 3, tablet: 2, mobile: 1).

Configure Instagram Source

The Instagram Source section is identical to the grid widget. See Instagram Feed documentation for full details on Connection type, API Source, Custom token, and caching controls.

Configure Feed Options

The Feed section controls which elements of each post card are visible. Because this is a carousel, the Load More button is not available — all fetched posts cycle through the slider.

1. Number of Posts: How many posts to load into the carousel (1–50).
2. Profile Image / Username / Menu Dots: Toggle each card header element on or off.
3. Media: Show or hide the post image or video thumbnail.
4. Autoplay Videos: Let video and Reel posts play muted and looped when the slide is in view.
5. Caption: Toggle caption visibility, set a word limit, and configure the Read More action.

Configure Carousel Settings

The Carousel Settings section controls all Swiper behavior.

1. Autoplay: Enable automatic sliding and set the delay interval in milliseconds.
2. Loop: Enable infinite looping so the carousel cycles back to the first slide after the last.
3. Speed: Transition duration in milliseconds between slides.
4. Space Between: Gap in pixels between adjacent slides.

Configure Navigation

The Navigation section controls the previous and next arrow buttons.

1. Show Navigation: Toggle arrow buttons on or off.
2. Choose arrow icon, size, position, and visibility rules (always visible vs. visible on hover only).

Configure Pagination

The Pagination section controls dot or fraction indicators below the carousel.

1. Show Pagination: Toggle pagination on or off.
2. Pagination Type: Bullets (dots) or Fraction (e.g., 2 / 10).
3. Set dot size, color, and active-dot color.

Style Your Instagram Feed Carousel

Use the Style tab to control the appearance of slides, navigation arrows, pagination, and the post card elements.

1. Item:
   Set the Link / Hashtag accent color, border radius, padding, and border for each slide card. The State Transition slider controls how smoothly the card animates between Normal, Hover, and Active states.
   
   Three tabs give independent control over each state:
   — Normal: Background, box shadow, and opacity for non-active slides.
   — Hover: Background, box shadow, and opacity when the mouse is over a slide.
   — Active: Background, box shadow, opacity, and Scale for the centered active slide — this is how you create the “spotlight” effect that draws the eye to the current card.
2. Header, Media, Caption:
   Same controls as the Instagram Feed grid widget — profile image size, username color and typography, media border radius, caption text color, word count, and Read More link styling.
3. Navigation:
   Arrow icon size, background (Normal / Hover), color, border, border radius, box shadow, and horizontal/vertical offset from the carousel edge.
4. Pagination:
   Dot size, color, active-dot color, spacing, and margin from the carousel bottom.

Save and Preview

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

Best Practices

1. Use the Active state Scale control (e.g., 1.05) to give the centered slide a subtle lift — this immediately signals to visitors which post is in focus.
2. Set Space Between to match your site’s grid gutter (16–24 px is typical) so the carousel feels integrated with the rest of the layout.
3. If you use both the Instagram Feed grid and the Carousel on the same page, they share the same server-side cache — no duplicate API calls are made.
4. Disable autoplay on pages where users need to read the caption — constant sliding interrupts reading. Instead, rely on the navigation arrows.

Troubleshooting

1. Carousel appears as a static column instead of sliding: This usually means the Swiper scripts failed to load. Check that Sky Addons Pro is active, that no caching plugin is stripping the swiper script, and that there are no JavaScript console errors on the page.
2. Active state styling is not visible: The Active tab targets the .swiper-slide-active class, which only exists when the carousel has more slides than the column count. Make sure Number of Posts is greater than the Columns setting.
3. Feed shows nothing: Check your Instagram API token in Sky Addons → Settings → API → Instagram. See the Instagram Feed troubleshooting section for token expiry and cache guidance.

Frequently Asked Questions

What is the difference between Instagram Feed and Instagram Feed Carousel?

The Instagram Feed widget displays posts in a static CSS grid (with optional masonry), while the Instagram Feed Carousel uses Swiper for touch-friendly sliding. Both share the same API credentials and caching layer. Use the grid for a gallery-style page section and the carousel for a more compact, space-efficient showcase.

Can I set different column counts per device?

Yes. The Columns control is responsive. Set the desktop, tablet, and mobile values independently. The Swiper configuration is rebuilt automatically for each breakpoint.

How do I create the “spotlight” effect where the center slide looks bigger?

In the Style tab under Item → Active, set a Scale value above 1.0 (e.g., 1.05 to 1.1). The State Transition slider controls how smoothly the size change animates as slides move in and out of the active position.

Does the carousel work on touch devices?

Yes. Swiper natively supports touch swipe on iOS and Android. Mouse drag is also supported on desktop.

Can I show both the grid and carousel on the same page without doubling API calls?

Yes. Both widgets share the same account-level transient cache. The first widget to run builds the cache; subsequent widgets on the same page read from it at no additional API cost.

Related Documentation

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

• Instagram Feed: The grid version of the Instagram widget with masonry layout, entrance animations, and Load More support.
• Loop Carousel: A Swiper carousel that renders any post type using a custom Elementor Loop template — the same carousel engine applied to WordPress content.
• Offcanvas: Slide in a drawer panel containing your Instagram feed or other social content from a button click anywhere on the page.

Conclusion

The Instagram Feed Carousel widget is the quickest way to turn your Instagram posts into an interactive, touch-friendly slider — with the same reliable API integration and caching as the grid widget, plus the Active slide highlight and full Swiper carousel controls. If you have any questions or need help, visit the Sky Addons support center.