Grid Slider Widget
A Grid Slider widget allows you to display multiple Slideshows within one grid. Every grid item will contain its own Slideshow including navigations, animations and other features.
Thumbnail Navigation
Use thumbnails of each item to navigate through the Slideshow. You can set thumbnail width and height and place the navigation on top of the Slideshow.
2 Columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
2 Columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Dynamic Grid
Create a Grid Slider whose items will arrange themselves fluently and seamlessly for a gap-free multi-column layout on all device sizes and filter items by name or tag.
Corporate Identity
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Typography
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
Additional Fields
Some of the elements that you can display inside a Grid Slider widget need to be defined first by creating an additional field inside the Content Manager.
| Field | Description |
|---|---|
| Tags | Need to be created for filtering items. |
| Badge | Set off text content visually from the rest of the item. |
| Media | An additional custom media field needs to be created for every slide a Slideshow is going to have. |
Grid Slider Options
| Layout Options | Settings | Description |
|---|---|---|
| Grid Behaviour | Match Height, Dynamic Grid | Match the height of grid items or display them in a masonry style. |
| Grid Gutter | Default, Collapse, Small | The spacing between grid columns. |
| Grid Filter | none, Text, Divider, Nav, Tabs | The navigation to filter grid items. |
| Grid Alignment | Left, Center, Right | Alignment of the filter navigation. |
| Columns Phone Portrait (Default) | 1, 2, 3, 4, 5, 6 | Number of columns on phones in portrait view. |
| Columns Phone Landscape | Inherit, 1-6 | Number of columns on phones in landscape view. |
| Columns Tablet | Inherit, 1-6 | Number of columns on tablets. |
| Columns Desktop | Inherit, 1-6 | Number of columns on desktops. |
| Columns Large Screens | Inherit, 1-6 | Number of columns on large desktops. |
| Items Panel | Blank, Box, Box-Primary, Box-Secondary, Hover, Header, Space | Choose a panel styling for the item. |
| Items Animation | None, Fade, Scale Up, Scale Down, Slide Top, Slide Bottom, Slide Left, Slide Right | The animation that will be applied to grid items when scrolling into view. |
| Media Options | Settings | Description |
|---|---|---|
| Media Image | [Number] | Set the width and height of the image in pixels. |
| Media Alignment | Teaser, Above Title, Below Title, Left, Right | Define the image alignment. |
| Slideshow Options | Settings | Description |
|---|---|---|
| Navigation | None, Donav, Thumbnails | Select the navigation for the Slideshows. |
| Navigation Position as overlay | Place the nav on top of your Slideshow content. | |
| Navigation Alignment | Left, Center, Right, Justify (Only Thumbnails) | Alignment of the navigation. |
| Navigation Slidenav | None, Default, Top Left, Top Right, Bottom Left, Bottom Right | Display or hide the prev/ next navigation and define the alignment. |
| Animations | Fade, Scroll, Swipe, Scale, Slice Up, Slice Down, Slice Up Down, Fold, Puzzle, Boxes, Boxes Reverse, Random Fx |
Select the animation when changing slides. |
| Animations Duration (ms) | [Number] | Define the duration of the animation. |
| Animations Autoplay | The Slideshow will automatically go through the different items. | |
| Animations Ken Burns | Enable Ken Burns effect on the image. |
| Content Options | Settings | Description |
|---|---|---|
| Text Display | Show or hide title and content. | |
| Text Title Size | Default, H1, H2, H3, H4, Extra Large | Define the font size of the title. |
| Text Alignment | Left, Center, To Media | 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. |
| Badge Display | Show or hide the badge. | |
| Badge Style | Default, Success, Warning, Danger, Text Muted, Text Primary | Set the style of the badge. |
| Badge Position | Panel, Title | Position the badge inside the panel or next to the title. |
| 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. |