Slideshow Widget
Create responsive image or video Slideshows with fancy transition effects and display content in an overlay. Widgetkit provides different navigations to browse through items.
Overlay
Display the title and content inside an overlay that can be aligned where you want. You can add a background and different animations to the overlay.
Fancy Animations
You can apply 11 different animations to items when switching between them or just let Widgetkit decide randomly which one to use.
Thumbnail Navigation
Use thumbnails of each item to navigate through the Slideshow. You can set thumbnail width and height and align the navigation below or on top of the Slideshow.
Videos and Iframes
You can use videos and iframes with YouTube and Vimeo films inside a Widgetkit Slideshow. The video will be muted and you can hide controls and other elements.
Additional Fields
Some of the elements that you can display inside a Slideshow widget need to be defined first by creating an additional field inside the Content Manager.
| Field | Description |
|---|---|
| Badge | Set off text content visually from the rest of the item. |
Slideshow Options
| Slideshow Options | Settings | Description |
|---|---|---|
| Navigation | None, Donav, Thumbnails | Select the navigation for your Slideshow. |
| Navigation Position the nav 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. | |
| Height Fullscreen | Extend the Slideshow to full viewport height. | |
| minimal Hight (px) | [Number] | Defines the minimal height of the Slideshow. |
| Media Options | Settings | Description |
|---|---|---|
| Display Show Media | Display the image or video of all items. | |
| Media Image | [Number] | Set the width and height of Slideshow images in pixels. |
| Overlay | None, Center, Center Left, Top, Bottom, Left, Right | Display or hide the overlay and define the alignment. |
| Overlay Animation | Fade, Slide | The animation that will be applied to the overlay when being displayed on hover. |
| Overlay Show panel background | Add a background to the overlay. |
| 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. |
| 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. |
| 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. |