Add a horizontal scroller
The horizontal scroller component adds scrollable blocks of content to your page, which visitors can navigate using arrow buttons or position numbers.
Note that this feature is available exclusively in the Components Editor.
-
Browse to the page where you want to add a horizontal scroller.
-
Go to Edit > Edit centre content:
-
Place the cursor where you want to add the horizontal scroller.
-
Select Add special features > Horizontal scroller:
-
The Add horizontal scroller pop-up appears:
-
Choose which Controls to show on the scroller, and the number of Items to show on screen at once.
Note: If you select Arrows and numbers or Numbers only, the numbers at the bottom of the component are used to select scroller positions based on the number of items to display on screen at once and the total number of items. For example, a scroller with 5 items set to show 1 item at a time will have the numbers 1-5 at the bottom, but if the same scroller is set to show 3 items at once, only the numbers 1-3 are displayed. This is because when the number 3 is selected, the third item appears on the left, the fourth item in the middle and the fifth (final) item on the right.
-
Select Pad items to leave a gap between items in the scroller, or deselect it if you want items to sit flush against each other.
-
Select Stretch items to full height of container to have the scroller display a constant height, instead of changing size based on the amount of content in the currently displayed items.
-
Use the Add item buttons to insert a new item at the start or end of the scroller.
-
Use the Move item up and Move item down buttons to change the order of items.
-
Select Delete item to remove unwanted items, or Duplicate to create a copy of an existing item.
-
-
When you're happy with the number and order of items, select Add horizontal scroller.
Note: The pop-up is only used to set the number and order of items in the scroller. You can add content to items via the main Components Editor screen.
-
The horizontal scroller appears in the editor:
-
You can enter content into each item like any other content block in the Components Editor. Scroll through items using the arrows or number controls, as selected in step 6, to access any items not currently visible.
-
When you're happy with your page's content, select Publish.