Show More Image Grid
The hero image or slider is very popular as an attention grabber in modern web design. The item is full width responsive with a fixed height.
The problem is that fixed height items don't translate too well when viewed on mobile devices. Only the center portion of the image can be seen.
Switch Height
This slider overcomes the problem by having a fixed height when viewed on computers which switches to a responsive height on mobile devices.
The height is set in viewport units rather than pixels so that it will occupy the same proportion of the viewable areas height no matter what the browser window height is set to.
Viewport units are relative units so 1vh represents 1% of the height of the browser or device viewport. Using viewport units - rather than absoute units like pixels - gives a lot better viewing experience as it adjusts the viewable height of the main item to suit the vistor's browser height setting.
Height Settings
The slider height setting would normally be at least 50 vh and the maximum setting is 100vh which extends its height to fill the browser window.
There is a control for setting a minimum height. This can be used to set a minimum absolute height in pixels but is mailnly there to allow the slider to have a reasonable height for editing on the EverWeb design canvas.
At the time of writing, EverWeb does not recognise viewport units.
Navigation
When viewed on computers, the navigation arrows are situated together at the bottom right. This is much more convenient for those using large screens.
When viewed on mobile devices, the arrows are positioed left and right and are vertically centered.
The arrows can be hidden on mobile devices if required where navigation can be carried out by swiping.