Switch Slider
Animation OptionThe slider switches from full width, fixed height on computers to responsive height on tablets and phones.
Image Overlay
CSS Grid
Item PositionThe heading, text block and link are positioned using the grid-column and grid-row properties.
Controls
Animation
DirectionThe animation direction for each item can be set on a per slide basis.
Switch Slider
A jfull width fixed height slideshow i;ooks impressive on a desktop or laptop but not so good on mobile devices.
The solution is to have a fixed height with the object-fit selector set to "cover" above the break point and to change an auto height container with the image object fit property set to "fill.".
Images
The slider images have a grid overlay with the items and controls …
- Large Image: 960 x 640px - file size 120KB
- Medium Image: 720 x 480px - file size 92KB
- Small Image: 375 x 540px - file size 45KB
- Images have a lazy loading option
- A main heading with position and animation controls
- An article element with a heading, optional span and text and positioning/animation controls
- A CTA style link with positioning and animation controls
- An optional pager with styling controls & hide on mobile function
- Previous next controls with styling controls & hide on mobile function
- Action tabs are together at the bottom right above the breakpoint
- On mobile devices the tabs are position left & right and vertically center
Animation
The heading, article and link can be animated if required. The animation time and delay is set for all slides and the animation direction is set for the individual slides - none, down, left, right & up.