Switch Slider
A full width, fixed hero stle slider will make a big impact at page load when viewed on computers but does not provide a good user experience on mobile devices.
A better option is to display the images at full with, fixed height on computers and full width responsive height
The lazy loaded images are inserted in two or three sizes with the phone square or portrait image being optional. Each one has a size and aspect ratio to suit the displaying device.
The images in the demo are …
- Large image 1200 x 800px
- Medium Image - 720 x 480 px
- Small image 375 x 540
Controls
Both the action tabs and the pager each have the option to be shown, above and below a preselected breakpoint and on phones in portraitmode
The action tabs have controls for icon color and background color and its opacity.
The pager items can be square or round with controls for color, active color, border width and color, item spacing and a checkbox to make them round.
Captions
The captions can be positioned horizontally and vertically left, center or right with controls to adjust their position away from the slider stage edges.
The caption can be supplemented with an optional description and have a maximum width setting.
Links
The link icon appears at the top right and can appear on hover on computers. It has controls for icon color and background color with opacity. Its position relative to the top and right can be adjusted.