Animated Product Slider
The hero image has a grid layout with three items - image, text block and an optional link.
Animation
Each item in the overlay can have a different animation selected from 15 types on a custom stylesheet.
Images
The main slideshow images are inserted in three sizes to make it suitable for use on responsive pages.
EverWeb Widgets
Product Slider
The hero slider has three animated items - an image, a text block with heading and a paragraph and an optional link.
Images
A full width or hero slideshow must load diffirent sizes of images for the various devices if it is to be suitable for responsive page designs.
The heri images in the example are 1200 x 800px, 720 x 480px and an image with an aspect ratio of 9:16 at 375 x 667 for mobile phones in portrait mode.
Animation
The widget uses a custom stylesheet to create the 15 different types of animation. Each item can have a different animation type, time and delay.
Navigation
The directional arrows are inserted at the bottom right for user convenience and can be hidden on mobile devices. The slide can also be navigated by grab and drag on computers and swipe of touch devices.
Pager
The optional pager has controls for color and active color and can also be hidden on mobile devices.
Note that both the arrows and the pager are hidden on phones in portrait mode by default.