The slider switches from full width, fixed height on computers to responsive height on tablets and to the portrait image on phones.
The slider switches from full width, fixed height on computers to responsive height on tablets and to the portrait image on phones.
The slider switches from full width, fixed height on computers to responsive height on tablets and to the portrait image on phones.
The pager is optional and can switch from round to square with adjustable spacing.
The action tabs are at the bottom right on computers and switch to left and right on mobile devices.
A slideshow for a responsive website must insert the images in three size for computer, tablet and phone in portrait mode and have a lazy loading function.
Design
The ThemeKit Active Slider uses Slick Slider which has been much modified to make it suitable for inserting in responsive web pages.
Images for a responsive slideshow should be resized and optionised before importing into er.The images used in the demo are …
The slideshow is full width with a fixed height on computers so the large image height should be the same as the slider's height setting.
On tablets and phones in landscape mode the image is responsive so the aspect ratio should be the same as for the large image.
On phones in portrait mode the image height determines the height of the slider when viewed on these devices.
The action tabs are located at the bottom right for user convenience. The tabs have controls for adjusting the icon color and for the background color and its opacity.
On mobile ddevices the action tabs are at the left and right and the skides can be swuoed,
The pager is optional and can removed for mobile devices in the same way as the action tabs.
The pager has controls for dot color, active color, dot spacing, adding a border and a checkbox to turn them round.
The pager is removed pm mobile devices.
The slides have a main heading, an article with heading and text and an optional link to open internal/external pages.
Heading
The main heading can be aligned left, center or right above the breakpoint. It has a text shadow and letter spacing option for thickening up Google hosted fonts with only one available font weight.
Article
The article is aligned center and, like the heading, a control for adding a border radius.
Link
The link has controls for font size, color, hover color and for border width and radius.
The links can be globally switched between internal and external.
Each item in the overlay has controls for setting the animation type on a per slide basis. The animations are none, left, down, right, up and scale.
The animation for each item has a checkbox to turn it on and for setting the time and delay globally.
Menu