# Webflow Sliders: Custom Arrows, Transitions, and CMS Carousels

- Tool: Webflow
- Difficulty: Intermediate
- Time required: 30-45 min
- Compatibility: All Webflow plans (custom code requires Basic plan or above)
- Last updated: March 2026

## TL;DR

To add a slider in Webflow, go to Add Elements (A) → Components → Slider and drag it onto the canvas. The Slider includes a Mask (the visible window), Slides (the panels), and Left/Right Arrow buttons and Slide Nav (dots) for controls. Add content inside each Slide, style the arrows and dots by selecting them, and set the transition type and duration in Element Settings (D). For a testimonials carousel or image gallery, this native component requires no custom code.

## Webflow Sliders: Custom Arrows, Dot Navigation, Transitions, and CMS Workarounds

Webflow's native Slider component handles testimonials, image galleries, feature showcases, and any content that benefits from sequential browsing. It is a self-contained component with a built-in Mask (the visible viewport), Slide panels, arrow controls, and dot navigation — all configurable without code. This tutorial covers the full slider workflow: adding and configuring the component, customizing arrows with SVG icons and hover states, styling dot navigation for current and non-current states, adding content inside slides (text, images, cards), setting transition types (slide or fade), and using autoplay. It also covers the known CMS limitation (sliders cannot be natively CMS-powered) and the Finsweet CMS Slider workaround. This is distinct from the custom dropdown and navbar tutorials — the Slider is a carousel/presentation component, not a navigation component.

## Before you start

- A Webflow project open in the Designer
- Content ready for the slider (testimonials, images, cards, or feature descriptions)
- For CMS-connected sliders: a published Webflow site with a CMS Collection containing the carousel items

## Step-by-step guide

### 1. Add the Slider component and explore its structure

Open the Add Elements panel (A) → scroll to the Components section (or search 'Slider') → drag the Slider element onto the canvas inside your section. Webflow creates the complete slider structure automatically. Open the Navigator (Z) to see: Slider → Mask → Slide (1) + Slide (2) + Left Arrow + Right Arrow + Slide Nav. The Mask is the visible window — it clips the slides to show only one at a time. Slides are the individual panels. Left and Right Arrows are the navigation buttons. Slide Nav contains the dot indicators. Give the Slider element a class like 'testimonial-slider' and begin customizing.

**Expected result:** A slider with two default slides, left/right arrows, and dot navigation appears on the canvas. You can drag between slides directly on the canvas.

### 2. Add and organize slides

To add more slides, select the Slider element → Element Settings (D) → click 'Add Slide'. Each new slide appears as a child of the Mask in the Navigator. To reorder slides, drag them in the Navigator (Z). To remove a slide, select it in the Navigator and press Delete. Inside each Slide, add your content: for a testimonials slider, add a Div Block with class 'testimonial-card' containing an Image (headshot), Text elements (quote, name, title), and a star rating Div. Keep all slides' content the same structure — the Slide width is inherited from the Mask, and the height is determined by the tallest slide unless you set a fixed height.

**Expected result:** The slider contains 3-6 slides with consistent content structure. Navigating between slides in the Designer by clicking arrows shows each slide's content.

### 3. Configure transition settings in Element Settings

With the Slider element selected, open Element Settings (D). Here you control: Animation (Slide, Fade, Cross-Fade), Easing (Ease, Linear, Ease In, Ease Out, Ease In-Out), Duration (transition speed in milliseconds — recommended: 400-600ms for Slide, 300-400ms for Fade), Autoplay (enable and set interval in seconds), and Infinite Loop (enable to cycle from last slide back to first). For testimonials, Fade or Cross-Fade creates a clean, editorial feel. For image galleries, Slide is more visually dynamic. Disable Autoplay for content-heavy slides that require reading time.

**Expected result:** The slider transitions between slides using your chosen animation style. Autoplay (if enabled) advances slides at your set interval.

### 4. Customize arrow navigation with SVG icons and hover states

The default Left and Right Arrow elements are simple text arrows. To replace them with custom icons: select the Left Arrow → double-click to enter it → delete the default content → add an HTML Embed (Add Elements A → Basic → HTML Embed) and paste your SVG code directly. Or add an Image element and use an uploaded arrow SVG from the Asset Manager. Style the arrow containers: select Left Arrow → Style Panel → Size → Width: 48px, Height: 48px. Style Panel → Borders → Border Radius: 50% (circular). Style Panel → Backgrounds → solid white. Style Panel → Effects → Box Shadows for depth. Add a Hover state: States → Hover → Backgrounds → brand color, optionally change the SVG color via filter. Position the arrows: default arrows float over the slider edges — use Style Panel → Position to adjust placement.

**Expected result:** The arrows display as styled icon buttons with hover color changes. They are clearly tappable and visually distinct from the slide content.

### 5. Style dot navigation for current and non-current states

The Slide Nav dots represent each slide. Webflow automatically applies a 'Current' class to the active dot. To style the dots, select a dot element inside Slide Nav (use Navigator Z to find the Slide Nav Dot elements). In the Style Panel Selector, look for the class applied to the dot (e.g., 'w-slider-dot'). Apply your non-current styles: Style Panel → Size → Width: 10px, Height: 10px. Style Panel → Borders → Border Radius: 50%. Style Panel → Backgrounds → Color: rgba(0,0,0,0.3). Add margins for spacing (Style Panel → Spacing → Margin: 0 4px). Now open the States dropdown and select 'Current'. Change the Background to your brand accent color and optionally scale it up slightly (Effects → Transforms → Scale: 1.2) for the active state.

**Expected result:** Non-current dots are small and semi-transparent. The current dot is larger and in your brand accent color. Navigating slides updates the current dot automatically.

### 6. Make the slider responsive at all breakpoints

Switch through breakpoints in the Breakpoint Bar. The Slider Mask must be 100% width at all breakpoints (Style Panel → Size → Width: 100%). Slide content inside the slide panels often needs font-size and padding adjustments at mobile sizes — select individual elements within a slide and adjust per breakpoint. For multi-card layouts (showing partial next slide on the sides), set the Slide Width in the Slider Element Settings (D) → Custom slide width. At Mobile Portrait, you may want to hide the left/right arrows (Style Panel → Display: None on Mobile Portrait) and rely on swipe gestures — Webflow's slider supports touch/swipe natively. Verify that minimum height settings prevent layout collapse on mobile.

**Expected result:** The slider displays correctly at Desktop, Tablet, and Mobile breakpoints. Arrows are hidden on mobile, and swiping between slides works on touch devices.

### 7. Implement CMS-powered slides using Finsweet CMS Slider

Webflow's native Slider component cannot be directly connected to a CMS Collection — you cannot bind the number of slides or their content to CMS items. The most reliable workaround is Finsweet CMS Slider (finsweet.com/attributes). Finsweet's solution uses Webflow's native Slider component, but you add a Collection List with your CMS content, and the Finsweet script converts that Collection List into a working slider. Setup: 1) Install Finsweet Attributes script in Project Settings Head Code. 2) Build a Collection List bound to your collection. 3) Add data-fs-element='cms-slider' attributes to the Collection List Wrapper. 4) Finsweet handles the rest, transforming the list into slides. RapidDev can help implement this integration for complex carousel requirements.

```
<!-- Add to Project Settings → Custom Code → Head Code -->
<!-- Finsweet CMS Slider (check finsweet.com for current version URL) -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsslider@1/cmsslider.js"></script>

<!-- Then add custom attributes to your Collection List Wrapper element:
     Element Settings (D) → Custom Attributes → '+'
     Name: fs-cmsslider-element
     Value: wrapper

     And on the Collection List element inside:
     Name: fs-cmsslider-element
     Value: list

     The Collection List Wrapper must be inside a Slider Mask element
     and the Collection List replaces the default slides -->

<!-- Alternatively, use native Webflow slider for fixed-content slides
     and only use Finsweet when CMS binding is truly required -->
```

**Expected result:** The Collection List items render as individual slides, dynamically populated from your CMS. Adding a new CMS item automatically creates a new slide after republishing.

## Complete code example

File: `Visual Steps Summary`

```text
WEBFLOW SLIDER — VISUAL STEPS SUMMARY

1. ADD SLIDER
   Add Elements (A) → Components → Slider
   Navigator (Z): Slider → Mask → Slide(1) + Slide(2) + Left Arrow + Right Arrow + Slide Nav
   Class: 'testimonial-slider' or 'image-gallery-slider'

2. ADD SLIDES
   Slider → Element Settings (D) → Add Slide
   Place content inside each Slide (testimonial card, image, feature block)
   Style Panel → Size → Min Height on Slider to prevent height shifts

3. TRANSITION SETTINGS
   Slider element → Element Settings (D):
   - Animation: Slide / Fade / Cross-Fade
   - Easing: Ease Out
   - Duration: 400-600ms
   - Autoplay: optional, 5-7s min for text content
   - Infinite Loop: enable

4. CUSTOM ARROWS
   Select Left Arrow / Right Arrow → double-click → replace content with SVG
   Style Panel → Size: 48×48px → Borders: Border Radius 50%
   Hover state: Background color change
   Position: Absolute, Left/Right: 16px (optional overlay style)

5. DOT NAVIGATION
   Select Slide Nav Dot → Style Panel → Size: 10×10px → Border Radius: 50%
   None state: Background: rgba(0,0,0,0.3)
   Current state: Background: brand accent color, Scale: 1.2

6. RESPONSIVE
   Tablet + Mobile: verify Mask Width: 100%
   Mobile: hide arrows (Display: None), rely on swipe
   Set Min Height to prevent collapse on small screens

7. CMS INTEGRATION (if needed)
   Use Finsweet CMS Slider (finsweet.com/attributes)
   Install script in Project Settings Head Code
   Add fs-cmsslider-element attributes to Collection List Wrapper + List
```

## Common mistakes

- **Slider height changes as different-height slides are displayed, causing layout shift** — undefined Fix: Set a Min Height on the Slider element (Style Panel → Size → Min Height). For a fully fixed height, set both Min Height and Height. To equalize all slides: select each Slide and set Height: 100%, then set a fixed Height on the Slider element itself. All slides will match the slider's defined height.
- **Custom arrow SVGs are not displaying inside the Left/Right Arrow elements** — undefined Fix: The Left and Right Arrow elements are actually Button elements — to add custom content inside them, you must double-click the arrow on the canvas to enter edit mode, delete the default content, and then add your Image or HTML Embed. Simply replacing styles on the arrow does not change the icon — you need to edit the element's content.
- **Dot navigation Current state styling is not applying to the active dot** — undefined Fix: The dots are styled with Webflow's internal class 'w-slider-dot'. When you style the Current state, make sure you are selecting a dot element (inside Slide Nav), not the Slide Nav wrapper. In the Navigator (Z), drill down to the dot element and verify you see the States dropdown with 'Current' available in the Style Panel Selector.
- **Slider is not working on the published site after adding Finsweet CMS Slider script** — undefined Fix: Finsweet Attributes require both: 1) the script installed in Project Settings Head Code with the correct URL, and 2) the custom attributes added to the correct elements (fs-cmsslider-element on both the Collection List Wrapper and the Collection List). Verify the attributes in Element Settings (D) → Custom Attributes. Also ensure the script URL is the current version from finsweet.com/attributes — outdated URLs break silently.

## Best practices

- Set a fixed Min Height on the Slider in Style Panel → Size to prevent the slider height from jumping when transitioning between slides with different content heights.
- Always enable Infinite Loop in Element Settings (D) for production sliders — users expect carousels to wrap around rather than stopping at the last slide.
- Use the Fade or Cross-Fade transition for text-heavy slides (testimonials, features) and Slide transition for image galleries where left-right spatial context matters.
- Style both arrow and dot navigation — many visitors navigate by dots on mobile, and by arrows on desktop. Both should be clearly visible and tappable (minimum 44×44px touch targets).
- For CMS-powered sliders, use Finsweet CMS Slider rather than building a fully custom JS carousel — Finsweet integrates with Webflow's native component and is maintained to stay compatible with Webflow updates.
- Test swipe gestures on real mobile devices after publishing — Webflow's native slider supports touch swipe automatically, but verify that swipe works with your specific content and does not conflict with page horizontal scroll.
- Add ARIA labels to the Slider element and arrows via Element Settings (D) → Custom Attributes to improve screen reader accessibility beyond the default Webflow ARIA attributes.

## Frequently asked questions

### Can Webflow sliders be connected to CMS content natively?

No. Webflow's native Slider component cannot be directly bound to a CMS Collection — you cannot have a dynamic number of slides or CMS-bound slide content natively. The most reliable workaround is Finsweet CMS Slider (finsweet.com/attributes), which transforms a CMS-connected Collection List into a functioning slider. For a small, fixed number of items, manually creating each slide is simpler and requires no third-party dependencies.

### How do I add a slide counter (e.g., '2 of 5') to a Webflow slider?

Webflow does not have a native slide counter display. You need custom JavaScript to read the current slide index and total slides from the Webflow slider's state. Add a Text element above or below the slider with an ID like 'slide-counter', then inject a small script in Page Settings Before </body> Code that listens for Webflow's slider change event and updates the counter text. This requires a Basic plan or above for custom code.

### What transition types does Webflow's Slider support?

Webflow's Slider component supports three transition types: Slide (horizontal pan between slides), Fade (current slide fades out while next fades in), and Cross-Fade (current and next slides fade simultaneously for a more blended transition). All three support configurable Duration (milliseconds) and Easing (Ease, Linear, Ease In, Ease Out, Ease In-Out). Cross-Fade is the smoothest option for overlapping content like portrait photos.

### Does Webflow's slider work with touch swipe on mobile?

Yes. Webflow's native Slider component supports touch swipe gestures natively on iOS and Android — no custom code required. Users can swipe left and right between slides on touch screen devices. This is one of the advantages of using the native Slider component over building a custom carousel from scratch.

---

Source: https://www.rapidevelopers.com/webflow-tutorials/webflow-slider-carousel
© RapidDev — https://www.rapidevelopers.com/webflow-tutorials/webflow-slider-carousel