Animated Hero Slider
The main heading, content and link are inserted as grid items.
This example uses the Viewport Height option to fill the device screen.
EverWeb Widgets
CSS Grid
Item Position
The heading, text block and link are positioned using the grid-column and grid-row properties.
Animation
Controls
The animation direction for each item can be set on a per slide basis and the delay and time globally.
Animated Hero Slider
Slideshow Settings
The slider is full width, fixed height. The height for the various devices can be set and there is a checkbox to turn on viewport height for all devices if required.
Images
The image should be cropped to the same size and aspect ratio before importing into EverWeb. The larger the image, the better the quality and the slower the download time.
The images in this example are only 1200px wide which is good enough quality for most purposes.
The images are served up using "on demand" lazy loading which means that the first, previous and next slides are downloaded at page load and the rest as needed. This function makes the slider more usefull than any other type for responsive pages due to better efficiency and faster download time..
Navigation
The slides can be navigated using the directional arrows on all devices if required. They can be changed using the keyboard arrows on computers too. The arrows can be turned off for autoplay or for tablets or just for mobile phones. The slides can be swiped on touch devices or changed by grab and drag on computers.
The optional pager can also be used for navigation and can be turned off on mobile phones. There are controls for setting the page color and the active color.
There is an autoplay function where the slide time can be set in milliseconds although it is not advisable to use it. There is a control for pause on hover or tap when autoplay is engaged.
Overlay Items
The overlay items can be turned on individually and consist of a heading, an HTML5 article element with a heading and text and a CTA style link tab.
Item Position
Each overlay item has a control for setting its position on the X-axis. This can be a column number or column number with column span.
The grid has 4 columns so to set the heading to the left it is positioned in row 1 and spans the track between rows 1 and 2. Its position is entered using the shorthand of 1/3. To center it, use 2/4 and to position it to the right use 3/5.
Small items like the link can be positioned in any column by entering just the column number. In this example it is in column 4.
Note that all the items become centered on narrower devices. This is done using media queries.
Animation
The animation time and delay can be set for each item globally and the animation direction set for each slide. If animation is not required, leave all the time and delay settings at zero.