ThemeKit Classy Widgets

  • ThemeKit Stage Slider 1
    ThemeKit Stage Slider
  • ThemeKit Stage Slider 2
    Switch On Mobile
  • ThemeKit Stage Slider 3
    Optional Captions
  • ThemeKit Stage Slider 4
    Autoplay Option

ThemeKit Stage Slider

Up Front or Backstage

The ThemeKit Stage Slider is full width. fixed height above the breakpoint and switches to responsive height below the break point. The slider can be set to fill the viewport height and fixed in position so that it acts like a slider in the background as the content below scrolls over it.
The slider has a classy wipe transition. It uses a custom made jQuery plugin which has a tiny file size to make it much more efficient than all the others that are available to EverWeb users.
Arrows
The navigation tabs are situated together at the right to make it easier for those using a desktop or laptop with a mouse. They switch position for mobile devices as described below.
The arrows have their own control for setting the color.
Captions
The captions are optional and are centered at the bottom. They can use a Google hosted font with a websafe fallback.
There are controls for font size, phone font size, color and for the background color and its opacity.
Switch
The break point on the demo slider is set for tablets in potrait mode. At this point the slider becomes responsive in width and height and scrolls with the page content.
Below the break point the prevoius/next arrows are situated either side of the slider stage to make it easier to navigation using thumbs on a tablet or phone.
Autoplay
Autoplay is really irritating in any situation and should be avoided on battery drieven mobile devices. This slider has the option to autoplay the slides on browser/screen widths above the break point and manual play below it.
Images
The images are inserted in two sizes for computers and mobile devices. The images used in the demo were sized to 1200 x 720px and 800 x 480px respectively and optimised before inporting into EverWeb.
Laxy Loading
The images are lazy loaded by default since this is a really essential feature for a slider that may be set to autoplay.