Slide Over Content

The slide has an invisible overlay divided into two 50% wide sections.
The left section contains an image and the right one an HTML5 article element.

Article

The article element has an h1 heading and a paragraph.
The background color has an adjustment for opacity.

Position

The image and the article are centered in their containers and have a maximum width setting.
Their position from the top uses a percentage slider for quick adjustment.

Animated Content Lazy Loading Hero Slider

The slideshow is full width, fixed height. Navigation is by directional arrows which can be hidden if autoplay is selected. The slider will swipe on mobile devices.
The slideshow can be set to autoplay and there are controls for setting the slide time and the transition time with a pause on hover option.

Content

The slider has two invisible overlays - each of which occupies half of the width. The left side has an image which animates in from the left.
The right side has a content container with an optional heading, text and an optional link tab.
Both of these have a setting for maximum width and their distance from the top is set using a percentage slider control.
The animation time for these items can be set individually so that they enter the viewport at different times.

Lazy Loading

The slider has a lazy loading feature which ensures that only the first three images are downloaded with page load. The rest are loaded when the visitor progresses through the slideshow. This means that a failrly large number of high resolution images can be used without effecting the page download time.

Viewport Height Option

The slider height is set by using a drag handle or the Metrics inspector to set the fixed height. There is an option to create a slider which fills the viewport of the browser or device screen. This simply requires checking a box and allows the slider to be used for a splash page with images and links to other pages.
In viewport height mode, a hero header widget with built navigation can be overlayed at the top if required.
Click HERE to open a demo in a new window. When viewing it with a computer, adjust the browser width and height to see how viewport height works.

© EverWeb Widgets -

EverWeb Widgets