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.

Slideshow

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

Read more

Slideshow

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

Read more

Slideshow

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

Read more


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.

  • пер
  • пер
  • пер
  • пер
  • пер
  • пер

пер

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.
  • Второй
  • Второй
  • Второй
  • Второй
  • Второй
  • Второй

Второй

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.

  • Camera
  • Camera
  • Camera
  • Camera

Camera

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

Read more

  • Corporate Identity
  • Corporate Identity
  • Corporate Identity
  • Corporate Identity

Corporate Identity

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

Read more

  • Typography
  • Typography
  • Typography
  • Typography

Typography

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

Read more

  • Style
  • Style
  • Style
  • Style

Style

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

Read more

  • Sticker
  • Sticker
  • Sticker
  • Sticker

Sticker

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

Read more

  • Concept
  • Concept
  • Concept
  • Concept

Concept

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

Read more


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

Get Widgetkit for WordPress or Joomla.

Buy Widgetkit