This slider has been designed for maximum efficency so that it doesn't adversely effect the download time and the time to become interactive.
Read the slide captions for more info and note that the demo links don't go anywhere!
Images
A responsive slideshow must have properly sized main images, mobile images and thumbnails. These should be optimised and lazy loading.
The demo is centered with a max width of 960px. The images were cropped and sized to …
- Main images 960 × 640px - file size less than 100KB
- Mobile images 720 x 480px - file size less than 50KB
- Thumbnails 200 x 133px - file size less than 8KB
Controls
The slides can be navigated using the action tabs or theumbnails.
The previous/next tabs are inserted together at the bottom right for convenience and can also be hidden if required.
Slides can be navigated using grab and drag on computers or swipe on touch devices.
Slider Stage
The stage has its own controls for background color and opacity, padding, border width and color and for adding a bottom box shadow.