Mission buchen

Slideshow

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.

  • Ken Burns Effect

    Ken Burns Effect

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Read more

  • Slide Navigation

    Slide Navigation

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Read more

  • Dot Navigation

    Dot Navigation

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Read more


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.

  • Overlay Center Left

    Overlay Center Left

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Read more

  • Fade Animation

    Fade Animation

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Read more

  • Panel Background

    Panel Background

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Read more

  • Overlay Bottom

    Overlay Bottom

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Slide Animation

    Slide Animation

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Panel Background

    Panel Background

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Fancy Animations

You can apply 11 different animations to items when switching between them or just let Widgetkit decide randomly which one to use.

  • Item 1
  • Item 2
  • Item 3

Fade

  • Item 1
  • Item 2
  • Item 3

Scroll

  • Item 1
  • Item 2
  • Item 3

Swipe

  • Item 1
  • Item 2
  • Item 3

Scale

  • Item 1
  • Item 2
  • Item 3

Slice Up

  • Item 1
  • Item 2
  • Item 3

Slice Down

  • Item 1
  • Item 2
  • Item 3

Fold

  • Item 1
  • Item 2
  • Item 3

Puzzle

  • Item 1
  • Item 2
  • Item 3

Boxes


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.

  • Thumbnail Navigation

    Thumbnail Navigation

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Thumbnail Navigation

    Thumbnail Navigation

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Thumbnail Navigation

    Thumbnail Navigation

    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Thumbnail Navigation
  • Thumbnail Navigation
  • Thumbnail Navigation

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.

  • Youtube 1
  • Youtube 2
  • Youtube 3

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.
Custom Link Target Open all links in a new window.
  • Hits: 436