Trapezoid Slider

This trapezoid shaped slider has lazy loading images and switches from responsive width fixed height on wider screens to responsive height on mobile devices for a better viewing experience.
The images are inserted in a rectangular container and have their top and bottom edges clipped using an SVG with polygon points and a clipPath.
The angle of the top and bottom edges is adjusted using sliders. The amount of clip varies from zero to 50 on the top and 50 to 100 on the bottom.
Setting both sliders to their maximum will create a triangle.
There is a checkbox to reverse the slope direction.
Images
The images should all have the same aspect ratio. The images used here were cropped to 1200px before importing into EverWeb.
Lazy Loading
Slideshows for responive pages really need to lazy the images. Otherwise they will cause very slow page loading - particularly on mobile devices.
Only three images are downloaded at page load - first, previous and next. The rest download as the slides are changed.
Slideshow Options
The slider can have a fade or slide transition and there is a control for setting the transition time in milliseconds.
Navigation is by directional arrows which can be hidden below the break point for swipe on mobile devices.
The autoplay option has a control for slide time set in milliseconds. Since autoplay is not recommended for mobile pages, there is a function to play the slides once and stop at the last one. When this is selected, loop is disengaged and the slide sequence can be reveresed using the "Previous" arrow.
Captions
The captions are positioned left or right depanding on the slope direction and can be positioned top or bottom. Their position can be fine tuned using the padding controls.
Links
The slides can be configured as hyperlinks globally to open internal or external pages using relative or absolute file paths. There is a "new window" option.
Follow the link below to find out about file paths …