ThemeKit M1 Wiper Slider
A variable two column grid layout content slider with an image and text content section.
EverWeb Widgets
Layout
The position of the image and text can be switched on browser/screen widths above the breakpoint. The text disappears and the heading overlays the image at the bottom below the break point.
Controls
The directional arrrows are inserted together at the bottom center above the breakpoint and left and right below it for thumb driving.
Autoplay
The slider can autoplay on browser/screen widths greater than the break point.
Autoplay should only be used if a client who doesn't know any better insists on it.
Links
Images can be links and show a link icon at the top right with a show on hover option on computers.
Container
The background can be a two color gradient with adjustable angle and there are controls for adjusting the top/bottom and left/right padding.
WIper Slider
If you must use an image slide you might as well make it memorable and different from all the rest! This wipe transition slideshow has a rwo column grid layout with the image in one column and a heading and text in the other.
The position of the image and text can be switched and the relative width of the columns can be adjusted.
On screen widths below the breakpoint the image spans both columns, the text can be removed and the heading overlays the bottom of the image like a caption.
Controls
For user convenience the previous/next controls are centered when viewed on computers.
On tablets the arrows remain at the bottom but move out to the screen edge for easy thumb driving.
On screen widths below the breakpoint setting the arrows remain at the screen edges but move up to be vertically centered in the slider.
Links
Images can be configured as internal or external links with a new window option. Links are denoted by a link icon which appears at the top right of the image.
The link icon can show on hover when the slider is viewed on computers.
Slide Nav
A vertical slide out navigation is the next best type to a centered vertical nav. The navigation can slide out from the left or right and has adjustable width.
The navigation can hold a large number of links. When there are more links than the height of the browser/device window any overflow will scroll into view.
Action Tab
The tab switches from the familiar three horizontal bars (Trigram for Heaven HTML symbol) when the menu is closed to a close icon when the navigation is in view.
The percentage vertical position of the tab can be adjusted using a slider.
Vertical Align
The slide panel fills the height of the browser/device screen. When the combined height of links idn't enough to fill the viewport height the links can be align vertically at the top, center of bottom.
Current Page
There is an option to indicate the current page using a different color for the link text which is turned o by checking a box.