Slider Widget
Create a series of items that you can scroll through using the mouse, touch gestures or a regular navigation. You can apply overlays and several styles to Slider items.
Center Image
The Slider provides the option of centering the items, so that the active item will be displayed in the middle. Images that spill over the width of the Slider will be cut off.
Image Hover
You can display both image and content statically or on hover. Choose from a number of animations for the image and the overlay or even display a second image on hover.
Infinite Scrolling
By default, the Slider loops the items, enabling you to scroll infinitely through the Slider. But you can also disable this, so that it stops after reaching the final item.
Slider Options
| Slider Options | Settings | Description |
|---|---|---|
| Navigation Slidenav | None, Default, Top/Left, Top/Right, Bottom/Left, Bottom/Right | Display or hide the prev/next navigation and define the alignment. |
| Mode Infinite | Items are looped and you can scroll endless. | |
| Mode Center | Center active item. | |
| Columns Phone Portrait | 1, 2, 3, 4, 5, 6 | Number of columns on phones in portrait view. |
| Columns Phone Landscape | Inherit, 1, 2, 3, 4, 5, 6 | Number of columns on phones in landscape view. |
| Columns Tablet | Inherit, 1, 2, 3, 4, 5, 6 | Number of columns on tablets. |
| Columns Desktop | Inherit, 1, 2, 3, 4, 5, 6 | Number of columns on desktops. |
| Columns Large Screens | Inherit, 1, 2, 3, 4, 5, 6 | Number of columns on large screens. |
| Height Fullscreen | Extend media to full viewport height. | |
| Min Height | [Number] | Minimum height of the media. |
| Media Options | Settings | Description |
|---|---|---|
| Display Show Media | Display the media of all items. | |
| Media Image | [Number] | Set the width and height of images in pixels. |
| Overlay Content | Toggle overlay content on hover. | |
| Overlay Background | None, Static, On hover | Set the visiblity of the overlay background. |
| Overlay Animation | Fade, Slide Top, Slide Bottom, Slide Left, Slide Right | Select the animation used to show the overlay. |
| Overlay Image | Static, On hover, Second Image on hover | Set the visibility of the overlay image. |
| Overlay Link | Link entire overlay, if link exists. |
| Content Options | Settings | Description |
|---|---|---|
| Text Display | Show or hide title and content. | |
| Text Title Size | H1, H2, H3, H4, Extra Large | Define the font size of the title. |
| Text Content Size | Default, Text Large, H2, H3, H4 | Define the font size of the title. |
| Text Alignment | Left, Right, Center | Define the text alignment. |
| Link Display | Display the Read More link. The link URL is added to each item in the Content Manager. | |
| Link Style | Text, Button, Button Primary, Button Large, Button Large Primary | Set the style of the Read More link. |
| Link Text | [Text] | Define the link text. |
| General Options | Settings | Description |
|---|---|---|
| Custom HTML Class | [Text] | Set a custom HTML class that will be added to the widget element in the rendered output. |