Can I set a responsive vertical slider with the pagination on the right side in Webflow?

You can create a responsive vertical slider in Webflow with pagination dots aligned to the right, but it requires some setup using Webflow’s native slider component plus a few custom style adjustments.

1. Use the Webflow Slider Component

• Drag the Slider component from the Add panel into your layout.
• Add Slides as needed inside the slider.

Webflow’s native slider only supports horizontal direction by default, but you can simulate a vertical slider with custom styling.

2. Customize to Simulate Vertical Scrolling

• Set the Slider element’s height (e.g., 100vh) and ensure overflow is hidden for a clean vertical scroll experience.
• Inside your Slider, stack slide content vertically using Flexbox or Grid.

To simulate the vertical effect:

• Rotate the entire Slider Track by 90 degrees using the Transform Rotate property.
• Then, rotate all individual Slides by -90 degrees to reorient the content upright.

This creates a vertical motion slide experience within Webflow’s horizontal framework.

3. Position Pagination Dots on the Right

• Select the Slider Nav (pagination) element in the Navigator.
• Inside the Style panel, change:
• Position to Absolute.
• Adjust top and right values to place it along the right edge.
• Use Flexbox to stack the dots vertically (Display: Flex, Direction: Column).
• You may need to adjust spacing and alignment using padding or Flex alignment options.

4. Make It Responsive

• For each breakpoint (Tablet, Mobile), fine-tune the width, spacing, and pagination placement to ensure it looks clean.
• You may want to reduce dot size or spacing on smaller breakpoints.
• Test the slider’s behavior on multiple screen sizes using Webflow’s built-in preview modes.

5. Optional: Add Custom Slide Transitions

• While directional animations (up/down) aren’t provided out of the box, you can use interactions (Webflow IX2) or minimal custom CSS to fine-tune the animation appearance.
• For more advanced vertical sliders, consider integrating with third-party JS libraries (e.g. Swiper.js), but Webflow native interactions are often sufficient.

Summary

You can build a responsive vertical slider in Webflow by rotating the slider track and slides, then styling the pagination dots to appear on the right side. Some adjustments are needed since Webflow’s default sliders move horizontally, but the effect is achievable with creative use of transforms and layout settings.