The Flipbox carousel layout in Post Flipbox and Story Flipbox uses a horizontal layout that renders cards as a carousel. In Layout Settings, set Layout Orientation to Horizontal to reveal carousel-specific controls. The default orientation is Vertical.
Post Flipbox → Content → Layout Settings → Horizontal Carousel
- Open Elementor Editor.
- Select the Post Flipbox widget.
- Open the Content tab.
- Expand Layout Settings.
- Set Layout Orientation to Horizontal before configuring carousel settings.
- Locate Slides Per View.
- Set the number of visible slides for the current breakpoint; the default is 2 and the supported range is 1–6.
- Locate Horizontal Slides Gap.
- Adjust the gap between slides; the source default is 20 px and the range is 0–100 px.
- Locate Previous Arrow Icon.
- Choose the previous-arrow icon.
- Locate Next Arrow Icon.
- Choose the next-arrow icon.
- Click Update to save the page.
Post Flipbox → Style → Slider Navigation
- Open Elementor Editor.
- Select the Post Flipbox widget.
- Open the Style tab.
- Open Slider Navigation.
- Adjust Arrow Color where available.
- Adjust Arrow Background Color where available.
- Adjust Arrow Size where available.
- Adjust Arrow Border Color where available.
- Adjust Arrow Border Radius where available.
- Adjust Pagination Dot Color.
- Adjust Pagination Active Dot Color.
- Click Update to save the page.
Story Flipbox → Content → Layout Settings → Horizontal Carousel
- Open Elementor Editor.
- Select the Story Flipbox widget.
- Open the Content tab.
- Expand Layout Settings.
- Set Layout Orientation to Horizontal before configuring carousel settings.
- Locate Slides Per View.
- Set the number of visible slides for the current breakpoint.
- Locate Horizontal Slides Gap.
- Adjust the gap between slides.
- Locate Previous Arrow Icon.
- Choose the previous-arrow icon.
- Locate Next Arrow Icon.
- Choose the next-arrow icon.
- Click Update to save the page.
Story Flipbox → Style → Slider Navigation
- Open Elementor Editor.
- Select the Story Flipbox widget.
- Open the Style tab.
- Open Slider Navigation.
- Adjust the available arrow styling controls.
- Adjust Pagination Dot Color where available.
- Adjust Pagination Active Dot Color where available.
- Adjust arrow border controls only if exposed by the selected widget section.
- Click Update to save the page.
Preview Carousel Navigation and Click Update
- Open Elementor Editor.
- Select the Post Flipbox widget.
- Confirm Layout Orientation is set to Horizontal before checking carousel-specific settings.
- Preview at Desktop width.
- Preview at Tablet width.
- Preview at Mobile width.
- Check the previous/next arrows.
- Check the pagination dots.
- Click Update to save the page.
- Test the published page separately; editor preview alone does not verify live-device behavior.
Configure the carousel
- Select the Post Flipbox or Story Flipbox widget and open Layout Settings in the Content tab.
- Set Layout Orientation to Horizontal.
- Adjust Slides Per View. The source sets the default to 2 and allows values from 1 to 6 in steps of 1; the control is responsive.
- Set Horizontal Slides Gap to adjust the distance between slides. The source default is 20 px, with a range of 0–100 px in 1 px steps.
- Review Previous Arrow Icon and Next Arrow Icon, which are available for the horizontal layout.
Style navigation and preview
The Style tab includes a Slider Navigation section for the horizontal layout. In the reviewed source it provides arrow color, arrow background color, arrow size, arrow border color, arrow border radius, pagination dot color, and active pagination dot color. Preview the carousel, test the navigation, and check that slides remain readable at tablet and mobile sizes.
For a row-and-column arrangement instead, see Configure the Flipbox Grid Layout.
Screenshot to add: the horizontal layout controls and the Slider Navigation style section. This is a placeholder, not an existing screenshot.
Return to Presets, Styling, and Responsive Layouts for the complete styling and responsive-layout guide.