Anything Carousel

The SiteOrigin Anything Carousel Widget displays images, text, or any other content in a carousel.

Requirements

To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Anything Carousel Widget.

The Anything Carousel Widget is ready to be used anywhere:

Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.

Usage

Title
Optionally enter a widget title.

Items

Here you’ll add your carousel items which consist of a title and a content area. Use the Add button to add as many items as you need to your carousel. On the right of each item, you’ll find three icons. The down arrow opens the item, the page icon duplicates the item, and the cross icon deletes the item.

Within each item, you’ll find the following fields:

Title
Optionally set an item title.

Content Type
By default, a text field will be available for your item content. If you’re using SiteOrigin Premium and have the Carousel addon enabled, you’ll also be able to select a Layout Builder. A Layout Builder is an instance of Page Builder; this means you build a layout consisting of columns and rows and add any widget you’d like within the item content area.

If you’d like to process shortcodes in the content field, select the Layout Builder option and insert a SiteOrigin Editor, which will output the shortcode.

Settings

Loop Items
Automatically return to the first item after the last item.

Navigation Dots
Display navigation dots below the carousel items.

Navigation Arrows
Display a navigation arrow on the left and right of the carousel.

Animation

Choose between Ease or Linear animation effects.

Animation Speed
Set the carousel animation speed. Defaults to 800 milliseconds.

Autoplay
Enable to scroll the carousel without user interaction.

Autoplay Pause On Hover
Displayed if Autoplay is enabled. If enabled, the carousel will pause on hover.

Timeout
Set the autoplay timeout. Defaults to 8000 milliseconds.

Adaptive Height
Enable to adjust the carousel height to match the visible items. When disabled, the carousel height will be set to the height of the tallest item.

Add Item Anchor ID in the URL
Enable to add carousel item anchor IDs in the URL. Anchor IDs allow linking to specific carousel items. This setting is included in the SiteOrigin Premium Carousel Addon.

Carousel Anchor
Optionally set a custom anchor ID. Required if the widget title field is empty.

Design

Item Title

HTML Tag
Set the item title HTML tag. Defaults to h4.

Font
Set the item title font family.

Font Size
Set the item title font size.

Color
Set the item title text color.

Bottom Margin
Set the item title bottom margin. Defaults to 24px.

Item

Font
Set the item text font family.

Font Size
Set the item text font size.

Color
Set the item text color.

Margin
Set the item margin. Defaults to Top:0px Right:12px Bottom:64px Left:12px.

Navigation

Arrows Color
Set the navigation arrows color. Defaults to #626262.

Arrows Hover Color
Set the navigation arrows hover color. Defaults to #000000.

Arrows Margin
The space between the navigation arrows and items.

Dots Color
Set the navigation dots color. Defaults to #bebebe.

Dots Selected and Hover Color
Set the navigation dots selected and hover color. Defaults to #f14e4e.

Responsive

Desktop

Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on desktop.

Slides to Show
The number of slides to show on desktop.

Navigation Dots
The number of slides to show on desktop.

Navigation Arrows
Display a navigation arrow on the left and right of the carousel on desktop.

Navigation Dots
Display navigation dots below the carousel items on desktop.

Tablet

Landscape

Breakpoint
The pixel resolution at which the tablet landscape settings are applied. Defaults to 1366px.

Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on tablet in landscape view.

Slides to Show
The number of slides to show on tablet in landscape view.

Navigation Dots
The number of slides to show on tablet in landscape view.

Navigation Arrows
Display a navigation arrow on the left and right of the carousel on tablet in landscape view.

Navigation Dots
Display navigation dots below the carousel items on tablet in landscape view.

Portrait

Breakpoint
The pixel resolution at which the tablet portrait settings are applied. Defaults to 1025px.

Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on tablet in portrait view.

Slides to Show
The number of slides to show on tablet in portrait view.

Navigation Dots
The number of slides to show on tablet in portrait view.

Navigation Arrows
Display a navigation arrow on the left and right of the carousel on tablet in portrait view.

Navigation Dots
Display navigation dots below the carousel items on tablet in portrait view.

Mobile

Breakpoint
The pixel resolution at which the mobile settings are applied. Defaults to 480px.

Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on mobile.

Slides to Show
The number of slides to show on tablet on mobile.

Navigation Dots
The number of slides to show on tablet on mobile.

Navigation Arrows
Display a navigation arrow on the left and right of the carousel on mobile.

Navigation Dots
Display navigation dots below the carousel items on mobile.

Global Settings

The following default settings apply to all Anything Carousel Widgets and can be adjusted at PluginsSiteOrigin WidgetsAnything Carousel: Settings.

Responsive

Desktop

Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on desktop.

Slides to Show
The number of slides to show on desktop.

Navigation Dots
The number of slides to show on desktop.

Navigation Arrows
Display a navigation arrow on the left and right of the carousel on desktop.

Navigation Dots
Display navigation dots below the carousel items on desktop.

Tablet

Landscape

Breakpoint
The pixel resolution at which the tablet landscape settings are applied. Defaults to 1366px.

Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on tablet in landscape view.

Slides to Show
The number of slides to show on tablet in landscape view.

Navigation Dots
The number of slides to show on tablet in landscape view.

Navigation Arrows
Display a navigation arrow on the left and right of the carousel on tablet in landscape view.

Navigation Dots
Display navigation dots below the carousel items on tablet in landscape view.

Portrait

Breakpoint
The pixel resolution at which the tablet portrait settings are applied. Defaults to 1025px.

Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on tablet in portrait view.

Slides to Show
The number of slides to show on tablet in portrait view.

Navigation Dots
The number of slides to show on tablet in portrait view.

Navigation Arrows
Display a navigation arrow on the left and right of the carousel on tablet in portrait view.

Navigation Dots
Display navigation dots below the carousel items on tablet in portrait view.

Mobile

Breakpoint
The pixel resolution at which the mobile settings are applied. Defaults to 480px.

Slides to Scroll
Set the number of slides to scroll per navigation click or swipe on mobile.

Slides to Show
The number of slides to show on tablet on mobile.

Navigation Dots
The number of slides to show on tablet on mobile.

Navigation Arrows
Display a navigation arrow on the left and right of the carousel on mobile.

Navigation Dots
Display navigation dots below the carousel items on mobile.