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.

image1.png

Minimum elements of a slider: image carousel and navigation – FlexSlider

 

All sliders in this article share at least three common features: (1) Some sort of navigation allows the direct call of a specific slide, (2) after a few seconds, the slide show continues automatically and (3) – a programmatic aspect – using the JavaScript library jQuery as technology foundation.

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.

image2.jpeg

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).

If you want to stay on the safe side at all costs, you should consider the highly configurable FlexSlider (that’s the one Codingpeople prefers) or bxSlider .

SEO Tipp

Aside from 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 <figure> block).

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.

 

image3.pngimage4.pngimage5.png
Responsive Design / Fluid variations depending on the screen width – bxSlider

 

 

image6.pngimage7.pngimage8.png
FlexSlider uses a combination of Fluid and Responsive Design presentation in its carousel

 

 

image9.pngimage10.png
Wow Slider responds Fluid to different widths, some coding is required to integrate truly Responsive behavior