EverWeb Widgets
Responsive Hero Slider
A hero slider with auto stop on last option
EverWeb Widgets
Overlay Grid
The slider uses a CSS Grid Layout overlay to position the items
EverWeb Widgets
Item Position
The overlay items use the grid-row, grid column and align-self selectors to position them and span columns and rows.
EverWeb Widgets
Auto Stop On Last
Autoplay slide time is set to 4000 milliseconds and the "Stop At Last" option is selected
CSS Grid Overlay Auto Stop Hero Slider
Grid Items
An autoplay slideshow should never be used on a page which will be displayed on a mobile phone which means any responsive page. If an unreasonable or uneducated client demands autoplay, this slider is a good compromise since it has an option to autoplay through the slides and then stop at the last one.
The full width, responsive fixed height slideshow has an invisible CSS grid layed out over the top of it so that the overlay items can be positioned anywhere over the image and remain in their relative position with varying browser/device width. Using CSS grid, this can be done with the minimum of code without resorting to the use of percentage sizes, floats or Javascript.
Images
The image size should be kept as small as possible. The ones used in this demo are 1200px x 750px and this gives a good enough quality at wide browser settings without making the images too large for downloading quickly over cell phone networks.
Lazy Loading
The images are set to lazy load by default to give the page a better chance of downloading reasonably fast in the browser. Even so, the number of images should be kept to a minimum.
Slideshow
The slide transition can be changed from fade to slide if required and the transition time set in milliseconds.
The directional arrows can be set to show only on hover and can be hidden on mobile phones if required where the visitor can navigate by swiping.
Autoplay is set by entering the slide time in milliseconds and the "Stop At Last Slide" function is turned on using a checkbox. In this mode, the slides cannot obviously loop although the visitor can navigate back and forward using the arrows if present or by swiping on touch devices.
Slideshow Height
The slideshow has a fixed height which is set in pixels. When viewed on mobile phones, instead of reducing the height it is set to 100vh which means that it will fill the height of the device window.
The slider can also be set to viewport height on computers and tablets by checking a box.
Overlay Items
There are three optional overlay items - an h1 heading, a text block with h2 heading and a paragraph and a CTA style link. These have a background color control with opacity adjustment and a border radius control.
The links can be created using relative or absolute file paths and can open in a new window if required.
Item Positioning
The items are positioned vertically by row number and horizontally by column number. Any item can made to span more than one column or row.
The vertical position and height of the item can be adjusted using the align-self property.
Navigation
The navigation is created using the RGL Overlay Navigation widget. This is placed below the slider on the EverWeb design canvas and appears as an overlay at the top of the item above it.
There is an option to make the mobile "hamburger" icon stick to the top of the device's window.
Search Bar
The info bar is the Responsive Search Bar widget which has options for a telephone number which switches to a "Call Me" phone icon on mobile phones, a spyglass search icon and an "Email Me" icon.
When clicked or tapped, the search icon opens a Google Custom Search form in a modal window.