(For more resources related to this topic, see here.)

Responsive image sliders

Opening a website and seeing an image slider in the header area is common nowadays. Image sliders display highlighted content, which are really useful, within a limited space. Although the free space is more limited when a site is viewed through mobile devices, the slider element still catches the client's attention.

The difference between how much area can be used to display a highlighted content and the resource available to render it is really big if compared with desktop, where we generally do not have problems with script performance, and the interaction of each transition is performed through the use of arrow signs to switch images.

When the responsive era started, the way that people normally interacted with image sliders was observed, and changes, such as the way to change each slide, were identiﬁed, based on the progressive enhancement concept. The solution was to provide a similar experience to the users of mobile devices: the adoption of gestures and touches on image slider elements for devices that accept them instead of displaying fallbacks.

With the constant evolution of browsers and technologies, there are many image slider plugins with responsive characteristics. My personal favorite plugins are Elastislide, FlexSlider2, ResponsiveSlides, Slicebox, and Swiper. There are plenty available, and the only way to ﬁnd one you truly like is to try them!

Let's look in detail at how each of them works.

Elastislide plugin

Elastislide is a responsive image slider that will adapt its size and behavior in order to work on any screen size based on jQuery. This jQuery plugin handles the slider's structure, including images with percentage-based width inside, displaying it horizontally or vertically with a predeﬁned minimum number of shown images.

Elastislide is licensed under the MIT license and can be downloaded from https://github.com/codrops/Elastislide.

When we are implementing an image slider, simply decreasing the container size and displaying a horizontal scrollbar will not solve the problem for small devices gracefully. The recommendation is to resize the internal items too. Elastislide ﬁxes this resizing issue very well and deﬁnes the minimum elements we want to show instead of simply hiding those using CSS.

Also, Elastislide uses a complementary and customized version of jQuery library named jQuery++. jQuery++ is another JavaScript library very useful to deal with DOM and special events. In this case, Elastislide has a custom version of jQuery++, which enables the plugin working with swipe events on touch devices.

How to do it

As we will see four different applications of this plugin for the same carousel, we will use the same HTML carousel's structure and may modify only the JavaScript before executing the plugin, specifying the parameters:

<ul id="carousel" class="elastislide-list"> 
<li><a href="#"><img src = "image-photo.jpg" /></a></li> 
<li><a href="#"><img src = "image-sky.jpg" /></a></li> 
<li><a href="#"><img src = "image-gardem.jpg" /></a></li> 
<li><a href="#"><img src = "image-flower.jpg" /></a></li> 
<li><a href="#"><img src = "image-belt.jpg" /></a></li> 
<li><a href="#"><img src = "image-wall.jpg" /></a></li> 
<li><a href="#"><img src = "image-street.jpg" /></a></li>  </ul>

At the bottom of the DOM (before the </body> closing tag), we will need to include the jQuery and jQuery++ libraries (required for this solution), and then the ElastiSlide script:

<script src = "http://code.jquery.com/jquery-1.9.1.min.js"></script>  
<script src = "js/jquerypp.custom.js"></script>  
<script src = "js/modernizr.custom.17475.js"></script>  
<script
src = "js/jquery.elastislide.js"></script>

Then, include the CSS stylesheet inside the <head> tag:

<link
   rel="stylesheet" type="text/css"
   href="css/elastislide.css" />

Alright, now we already have the basis to show four different examples. For each example, you must add different parameters when executing the plugin script, in order to get different rendering, depending on the project need.

Example 1 – minimum of three visible images (default)

In this ﬁrst example, we will see the default visual and behavior, and whether we will put the following code right after it, including the ElastiSlide plugin:

The default options that come with this solution are:

Minimum three items will be shown
Speed of scroll effect is 0.5 seconds
Horizontal orientation
Easing effect is deﬁned as ease-in-out
The carousel will start to show the ﬁrst image on the list

The following screenshot represents what the implementation of this code will look like. Look at the difference between its versions shown on tablets and smartphones:

building-responsive-image-sliders-img-0

Example 2 – vertical with a minimum of three visible images

There is an option to render the carousel vertically, just by changing one parameter. Furthermore, we may speed up the scrolling effect. Remember to include the same ﬁles used in Example 1, and then insert the following code into the DOM:

<script type="text/javascript">  
$('#carousel').elastislide({  
orientation: 'vertical', 
speed: 250  
});  
</script>

By default, three images are displayed as a minimum. But this minimum value can be modiﬁed as we will see in our next example:

building-responsive-image-sliders-img-1

Example 3 – ﬁxed wrapper with a minimum of two visible images

In this example, we will deﬁne the minimum visible items in the carousel, the difference may be noticed when the carousel is viewed on small screens and the images will not reduce too much. Also, we may deﬁne the image to be shown starting from the third one.

Remember to include the same ﬁ les that were used in Example 1, and then execute the scripts informing the following parameters and positioning them after including the ElastiSlide plugin:

<script>  
$('#carousel').elastislide({  
minItems: 2,  
start: 2  
});  
</script>

building-responsive-image-sliders-img-2

Example 4 – minimum of four images visible in an image gallery

In the fourth example, we can see many JavaScript implementations. However, the main objective of this example is to show the possibility which this plugin provides to us. Through the use of plugin callback functions and private functions we may track the click and the current image, and then handle this image change on demand by creating an image gallery:

<script>  
var current = 0;  
var $preview = $('#preview');  
var $carouselEl = $('#carousel');  
var $carouselItems = $carouselEl.children();  
var carousel = $carouselEl.elastislide({ 
current: current,
minItems: 4,  
onClick: function(el, pos, evt){  
changeImage(el, pos);  
evt.preventDefault();  
},  
onReady: function(){  
changeImage($carouselItems.eq(current), current);  
}  
});  
function changeImage(el, pos) {  
$preview.attr('src', el.data('preview'));  
$carouselItems.removeClass('current-img');  
el.addClass('current-img');  
carousel.setCurrent(pos);  
}  
</script>

building-responsive-image-sliders-img-3

For this purpose, ElastiSlide may not have big advantages if compared with other plugins because it depends on our extra development to ﬁnalize this gallery. So, let's see what the next plugin offers to solve this problem.