We were looking for a great way to display related content that may be too long or large to be comfortably fitted onto a devices screen. We wanted this content to either be scrolled via a mouse or simply swiped into view should the user be on a touchscreen / mobile device.
Deciding on researching and building what we termed as a ‘Feature Slider’, we set about sketching out potential layouts for the slider and producing our development criteria:
- Horizontal image sliding via left and right controls
- Fully device responsive
- Finger touch and swipe support (mobile device and touch screens)
- Extensible enough to include light box video / HTML content should we wish to add these enhancements in the future.
During our research phase we looked at how other websites such as bbc.co.uk, manchester.gov.uk and online retailers such as Nike and Amazon were implementing sliding galleries or carousels as they may also be referred to. On initial inspection, these all seemed to look like they offered everything we needed. However on closer inspection these all seemed to be relying on external plugins (sometimes more than one!) to support their visual and navigation features. Some also seemed to be not as configurable as we would of liked in termed of visual display – such as turning off image pop up light boxes.
Once we had added the mark up to our testing environment, it was evident that some CSS modification would be needed in order to strip out any unwanted visual and transitional behaviours. Unnecessary JQuery script was also removed in order to minimise overall file size of the Feature Slider.
Once the Beta version of Feature Slider was complete, we noticed that it was not quite clear to users on mobile devices that the slider had come to an end. So with the use of a small line of JQuery, we ensured that the far left and right menus were hidden when they were not needed, for clearer navigation. The file size of the Feature Slider was further reduced by converting the previous and next slide buttons into pure CSS over PNG images.
You can view the new Feature Slider here. Why not let us know your thoughts and of course any suggestions for it’s improvement?