The slider module allows you to add a horizontally swipe-able list of items to your app. Each item is presented as an image with optional title text and can link to anywhere within the app or to an external URL. This module is extremely flexible and tends to be used frequently to build custom pages.
Properties
The following properties can be used to change the behavior and design of the slider module.
Title (optional) - Title text to show above the slider items
Size - The relative size of the slider items. The exact size will vary depending on the “Layout” property (see below), the user’s screen size, the device orientation, etc.
Action Link (optional) - A link shown above the slider items and opposite the title. This can link to any location within the app or to an external URL. This is usually used to present a “See all” or “View more” option that links to a more complete view of the items in the slider. For example, if a slider is used to show the first few items in a collection the action link might point to the full collection page.
Show Item Titles - Shows each item’s title below its image. Usually this is turned off if each item’s image is self-explanatory (e.g. if the images contain text as is common with movie posters, book covers, etc.). Note that regardless of this property each item is required to have a title defined and the titles are always made available to accessibility tools like screen readers.
Layout - The items in a slider may be displayed in one of three layouts:
1 Row - Items are presented in a single horizontal row.
2 Row - Items are presented in two stacked horizontal rows.
Mixed - Items are presented in an alternating layout with 1 large item followed by 4 smaller items in a grid.
Item Shape - The shape of each item’s image. The shape is applied as a mask to the images that you provide. Take note of the aspect ratio of each shape when designing images for a slider. Your images are not required to match these aspect ratios, but if they don’t then they will be cropped in order to fill the selected shape.
Square - The image is presented in a square mask (aspect ratio 1:1)
Tall - The image is presented in a tall or portrait mask (aspect ratio 7:10)
Wide - The image is presented in a wide or landscape mask (aspect ratio 7:4)
Circle - The image is presented in a circular mask (aspect ratio 1:1)
Item Types
You can manually specify the items in your slider (see “Custom” below) or auto-populate them from a variety of sources.
Collection - Select a collection to show the first few items of the collection in the slider. The slider will automatically update when the collection is changed.
Podcast - Select a podcast to show the most recent episodes of the podcast in the slider. Each episode’s individual artwork will be shown if provided, otherwise the podcast’s artwork will be used. The slider will automatically update when new episodes are released.
Video Series - Select a video series to show the most recent episodes of the most recent season in the series. The slider will automatically update when new episodes are released.
Custom - Fill the slider with custom items. Each item requires an image, a title, and a link. When the user taps the item’s image they will be taken to the link’s destination. The link may point anywhere in the app or to an external URL. If the link points to an external URL then the URL will open in an in-app browser on iOS or Android or in a new browser tab on the web.
Recombee - Fill the slider with automated recommendations from Recombee. See the Recombee integration documentation for details.