Responsive Slider

A responsive slideshow that will be displayed on computers, tablets and mobile phones needs several essential features. The size of the images needs to be as small as possible so the slider needs a maximum width setting which can be adjusted to suit the width of the image files.
Unless the number of images is no more than three or four, the slideshow needs to lazy load the images.
Navigation using arrows is the preferred method on computers but this needs to be changed to swipe on touch devices like the iPad and iPhone.
Every good web designer knows that autoplay should never be used for slideshows that will be played on portable devices that are battery driven. If autoplay is absolutely essential, the slideshow should play through the slides and then stop.
The Responsive Lazy Slider has all these features and more …
Images
The images in this example were reduced to about 1200px wide before importing into EverWeb and the maximum width is set to this amount to preserve quality on larger screens. 1200px should be considered an absolute maximum size and less is much better.
Normally, sliders for mobile devices should be restricted to no more than half a dozen images. This slider loads the first, next and last images on page load and then loads the other ones if and when the visitor navigates through them. This means that a larger number of slides can be used as long as the slider is not set to autoplay.
Captions
Captions are optional and are turned on globally. They overlay the image at the bottom and can be aligned left, center or right.
The font can be web safe or non web safe or Google hosted with a web safe fallback. The caption font can be set for size and color and background color and its opacity.
Links
Links can be turned on globally and can be configured as external or internal and to open in a new window if required.
Slider Settings & Navigation
The slideshow has a choice of a fade or slide transition and the transition time is set in milliseconds.
For manual operation, the slideshow should be set to loop so that it moves on to the first slide after the last one is displayed. It can be set to show the navigation arrows on page load or only on hover when viewed on computers and laptops. There is a checkbox for removing the arrows when the page is viewed on a mobile device and navigation is by swiping.
Autoplay
If autoplay is a must - do to stupidity or an ignorant client - it can be set by entering a slide time in milliseconds. The more sensible user will opt for the "Stop On Last" option. This autoplays the slides once and stops at the last one. In this mode, the loop control must be disenegaged by unchecking the box.
Overall Styles
The container can have a border and/or a box shadow. When a box shadow is added, the slider overall width is reduced slightly so that the shadow will show to the left and right. The vertical spacing adjustment should be set to at least that of the box shadow radius.