Slideshow
If a responsive slider is content or full width it must be able to load a smaller image for mobile devices and lazy load the images.
The ThemeKit RWD-X Slider has both of these very important functions and uses the HTML5 <picture> element to allow the inclusion of alt text for the search engines and screen readers.
Controls
The previous/next arrow controls are placed together at the bottom right for user convenience.
The slides can also be changed using grab and drag on computers and swipe on touch devices. The arrows can be removed at the selected break point if required..
Captions.
The caption container has the caption and a text description. The caption can be positioned top, center or bottom and left, center or right. There are controls for adjusting the caption position relative to the edge of the image.
Aspect Ratio
On computers the slideshow is full width with a fixed height. This may look great when viewed on a big screen but not so good on mobile devices.
On tablets and phones the height becomes auto so that visitors using a tablet or mobile phone will actually see the whole image and not just a part of it.
Mobile Phones
Ideally images should be square or portrait for mobile phone users. The slider has the option of loading a portrait image for phones. The image in the demo was sized to 375 x 540px and optimised before importing into EverWeb.
Lazy Loading
The lazy loading feature has the option to turn it on and another option to preload the previous and next images for a better viewer experience.
