Anything Carousel

The Anything Carousel widget shows a set of items in a carousel. Each item has a title and a content area for text, images or other media. You can set how many items show and scroll on desktop, tablet and mobile.

Requirements

To use this widget, go to PluginsSiteOrigin Widgets and activate Anything Carousel.

You can use the Anything Carousel widget in three places:

Page Builder: Add the SiteOrigin Anything Carousel widget to a Page Builder layout in the Classic Editor or in the SiteOrigin Layout block.
Block Editor: Add the SiteOrigin Anything Carousel block. It is in the SiteOrigin category of the block inserter.
Widget areas: Add the widget to any theme or plugin widget area.

The widget form has a Title field and four sections: Items, Settings, Design and Responsive.

The Anything Carousel widget form with the Items repeater

Title
An optional title above the carousel.

Items

Click Add to add an item. Click an item to open it. Use the icons on the right of an item to duplicate or delete it.

Title
The item title. It shows above the item content.

Content
The item content. Use the editor to add text, images and other media.

Settings

Loop Items
Return to the first item after the last item. Default: on.

Navigation Dots
Show dots below the items. Default: on.

Navigation Arrows
Show previous and next arrows. Default: on.

Animation
The transition effect: Ease or Linear. Default: Ease.

Animation Speed
The length of the transition, in milliseconds. Default: 400.

Autoplay
Move the carousel automatically. Default: off.

Adaptive Height
Resize the carousel to fit the tallest item in view. Default: off.

Autoplay Pause on Hover
Pause autoplay while the pointer is over the carousel. Appears when Autoplay is on. Default: off.

Timeout
The time between moves, in milliseconds. Appears when Autoplay is on. Default: 8000.

Design

Item title

HTML Tag
H1 to H6, or Paragraph. Default: H4.

Font
Default: Use theme font.

Font size
The item title size.

Color
The item title color.

Bottom Margin
The space below the item title. Default: 24px.

Item

Font
The font of the item content. Default: Use theme font.

Font Size
The size of the item content. At the moment, this setting has no effect.

Color
The color of the item content.

Margin
The space around each item: top, right, bottom and left, in px or %. Default: 0 12px 64px 12px.

Navigation

Arrows Location
Left and Right puts one arrow on each side of the items. Bottom Right puts the arrows below the items, on the right, with the dots on the left. Default: Left and Right.

Arrows Color
Default: #626262.

Arrows Hover Color
Default: #000.

Arrows Margin
The space between the arrows and the items.

Dots Color
Default: #bebebe.

Dots Selected and Hover Color
The color of the current dot and of a dot on hover. Default: #f14e4e.

The Anything Carousel on the front end with arrows and dots

Responsive

These settings control how many items show and scroll on each device. The number fields show the global value in grey. Leave a number field empty to use the global value. See Global Settings below.

Each device group has these settings:

  • Breakpoint (Tablet and Mobile only): the screen width, in pixels, for that device group.
  • Slides to Scroll: the number of items to move for each arrow click or swipe.
  • Slides to Show: the number of items in view.
  • Navigation Arrows: show the arrows on this device. Appears when Settings > Navigation Arrows is on.
  • Navigation Dots: show the dots on this device. Appears when Settings > Navigation Dots is on.

The device groups and their default values are:

  • Desktop: screens at or above the Tablet Landscape breakpoint. Portrait screens between the Portrait and Landscape breakpoints also use the Desktop Slides to Scroll and Slides to Show. Slides to Scroll 3, Slides to Show 3.
  • Tablet > Landscape: screens between the Portrait and Landscape breakpoints, in landscape orientation. Breakpoint 1366, Slides to Scroll 3, Slides to Show 3.
  • Tablet > Portrait: screens between the Mobile and Portrait breakpoints. Breakpoint 1025, Slides to Scroll 2, Slides to Show 2.
  • Mobile: screens narrower than the Mobile breakpoint. Breakpoint 480, Slides to Scroll 1, Slides to Show 1.

At the moment, the per-device Navigation Arrows and Navigation Dots settings use the global tablet breakpoints (1366 and 1025 by default) to hide arrows and dots, even if you change the tablet Breakpoint values in the widget. The number of items in view does use the widget’s values.

The Responsive section with the Tablet Landscape settings

Global Settings

Go to PluginsSiteOrigin Widgets and click Settings on the Anything Carousel widget. The Responsive section there has the same fields as the widget’s Responsive section. Its Breakpoint, Slides to Scroll and Slides to Show values apply to every Anything Carousel widget that leaves those fields empty. The per-device Navigation Arrows and Navigation Dots checkboxes save their own values in each widget, so change them in the widget.

SiteOrigin Premium

SiteOrigin Premium adds these features to the Anything Carousel widget:

  • Carousel: adds Content Type to each item. Choose Text or Layout builder. Layout builder lets you build the item with Page Builder rows and widgets, so you can add any widget to an item.
  • Anchor ID: adds Add item anchor id in the URL and Carousel anchor to Settings, so you can link to an item.

A carousel item with Content Type set to Layout builder