ThemeKit UI

Responsive Slideshow

EverWeb ThemeKit

Slideshow Essentials

Choosing A Slider

Most of the popular slideshows - Galleria, Swiper, Slick and Lightslider - are not suitable for use on responsive websites withour modification.
Popular slideshows usually have for too many non required styles and and some cannot insert the image in three sizes for the various devices.
Most sliders can lazy load the large image but not the tablet and phone images.

Animation

Avoid using all those a slider with a whole bunch of transition types. The slide transition should be fade on computers and slide on mobile.
Any caption animation should be set for a slow and gracefull entrance!

Headings

Choosing A Slider

Most of the popular slideshows - Galleria, Swiper, Slick and Lightslider - are not suitable for use on responsive websites withour modification.
Popular slideshows usually have for too many non required styles and and some cannot insert the image in three sizes for the various devices.
Most sliders can lazy load the large image but not the tablet and phone images.

Features

The ThemeKit UI Heading widget creates an h1 through h3 heading with the option to add a logo/link/
The heading text has the option to add a text shadow to thicken up Google hosted fonts that only have one light font weight.
The background can be a solid color or a two color gradient

Line/Spacer - Fade In

Rather than use an h3 heading to denote a change in subject or content type a line/spacer can be used to provide a visual break and add some "white" space.
The spacer with line is shown above and the spacer without line plus content fade is in inserted below the previous/next links.

Content Fade In

Allowing the page content to fade in over time has a couple of advantages. It creates a smooth entrance for the page content and the delay allows an item like a hero image time to download.
The fade in function has a checkbox to turn it on and a control for the fade in time set in milliseconds.