Frontend Components: jQuery Sliders
In times of high resolution tablets and smartphones and gigantic desktop monitors, website layout adopts and becomes more generously spaced. For a couple of years large, animated staging areas have becoming quite trendy – they fill the upper part of the page with sliding slogans, product images and other teaser content.
While the user acceptability is controversial, this visual component is still a fancy, eye-catching way of presenting product or testimonials from satisfied customers. Other names for this grown-up slider: Carousel (displays multiple scrollable images), stage and, more general, slideshow.
Minimum elements of a slider: image carousel and navigation – FlexSlider
Quite different are these sliders in respect to their features, programmatic extensibility, integration in other systems and, last but not least, the file size and therefore the loading speed.
What do the transition effects look like?
How fine can you adjust the timings?
In which order will the slides be displayed?
Will the slider be displayed on mobile devices?
We’ll have a look at all the aspects that are important for picking the perfect slider for your website.
Presentation and Navigation
Minimum requirement for a slider is the rendering of images and a rudimentary navigation to allow the user to immediately load specific slides, e.g. via small dots at the bottom border, a thumbnail bar or carousels that offer clickable and scrollable miniature versions of the slides.
Simple slider with clickable thumbnail bar/carousel – FlexSlider
The presentation features of slider solutions are often underrated, there are already major difference in this aspect. Any arbitrary slider is installed very quickly, and overhastily, and suddenly the new requirements for SEO captions, vertical scrolling and adaptive resizing are not feasible. Considering the massive number of sliders, it’s worthwhile to have at least a small requirements analysis to define the perfect product.
A few suggestions which presentation and usability features you might want to look out for:
- Captions (formattable)
- Manual navigation / automatic sliding
- Thumbnail / carousel selection
- Scroll directions
- Multiple sliders on one page
- Wide range of compatible media (AnythingSlider, μslider).
alt attributes are captions a good idea to add descriptive text to an image. In times of HTML5 there is even a semantic element available:
<figcaption> (nested inside a
Browser Compatibility and Responsive Design
Thanks to jQuery, decision makers and developers don’t have to waste much time to evaluate frontend features according to their browser compatibility . There is a battalion of motivated developers behind all those open source libraries and frameworks, and they all make sure that their plug ins run at least in all current browser versions. All major browser manufacturers let their products update themselves automatically, so chances are high these days that a website visitors runs a reasonably new browser version that supports the modern technologies. But even if they don’t, jQuery and even some of the sliders provide fallback solutions to support older or unloved browsers, like the IE8.
Since tablets and smartphones are on the uprise (e.g. tablet sales 2015 worldwide 233 million ) , the subject of Responsive Design must be considered. There are different approaches within slider technologies, although the topic is important to all developers and communities.
Responsive or Fluid Design?
In Fluid web design, all content elements adjust their size proportional to the size of the media they are displayed on. Responsive Design takes a larger step forward and allows completely new element arrangements for defined devices and display widths by introducing so called CSS media queries.
The question is, how does the presentation change when the display width drops under a set of specified pixel values. One slider reduces the number of slides displayed at once (Responsive), another slider scales down the images (Fluid), yet another one uses a combination of both and allows a custom setting per slide show.