Goat Slider

How to integrate Goat Slider with Webflow

Webflow's native slider works for basic use cases, but has limited CMS integration. Goat Slider fills this gap by binding directly to Webflow Collections, enabling sliders that populate automatically from CMS content.

Use the Goat Slider app

Install the Goat Slider app from the Webflow Apps Marketplace. Access the app through the Extensions panel to create sliders, configure transitions, and generate embed code — all without JavaScript.

Slider types:

• Slider: Full-width hero presentations with slide or fade transitions
• Carousel: Multi-item displays showing multiple slides at once

Before/after comparison sliders can be built as a pattern using standard slider functionality, though it's not a separate built-in type.

Configuration options:

• Navigation arrows, pagination dots, and counters
• Autoplay timing and keyboard navigation
• Touch interactions with draggable slides and swipe gestures
• CMS binding to Webflow Collections (requires paid Goat Slider plan)

Plan requirements:

• Free Goat Slider plan: Unlimited static sliders with basic customization
• Paid plans (Pro/Lifetime): CMS integration and advanced features
• Paid Webflow Site plan required: Custom code only works after publishing

Embed and style sliders

Goat Slider generates embed code that you place using Webflow's Code Embed element. Copy the snippet from the app and paste it where you want the slider.

All styling happens through Webflow's native style panel — colors, typography, spacing, hover states, and responsive behavior for arrows, dots, and slide content.

Webflow Interactions

In-view and on-scroll animations work. On-click animations are not supported due to conflicts with Webflow's animation library. Adding click animations to slider buttons can disable click functionality entirely.

Build with Webflow's Data API

For teams managing slider content through CMS, Webflow's Data API v2 provides full CRUD operations on collections. Since Goat Slider automatically reflects CMS changes, updating collection items via API updates the slider.

• GET /collections/{collection_id}/items — list current slider content
• POST /collections/{collection_id}/items — create new slides (staged state)
• PATCH /collections/{collection_id}/items/{item_id} — update existing content
• Publish endpoint required to make changes visible on live site

Authentication requires Bearer token with cms:read and cms:write scopes. Rate limits: 60 requests/minute on Starter/Basic, 120 on CMS/Business plans.

What you can build

Integrate Goat Slider with Webflow for dynamic, CMS-driven slider experiences. CMS integration requires Pro/Lifetime plan.

• Product showcase carousels: Build e-commerce galleries displaying multiple products per view, automatically pulling from your CMS collection when inventory updates.
• Portfolio case study sliders: Create full-width hero presentations for creative agencies, with slides populated from a case studies collection including project images and descriptions.
• Testimonial rotation displays: Design social proof sections where customer reviews cycle automatically, managed through a CMS collection that marketing teams can update without designer involvement.
• Before/after comparison tools: Build interactive comparison sliders for service businesses showing transformation results, using standard slider functionality with CMS-stored image pairs.