6 min read

(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 identified, 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 find 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 predefined 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 fixes this resizing issue very well and defines 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 first example, we will see the default visual and behavior, and whether we will put the following code right after it, including the ElastiSlide plugin:

<script type="text/javascript">  
$('#carousel').elastislide();  
</script>

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 defined as ease-in-out
  • The carousel will start to show the first 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:

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 files 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 modified as we will see in our next example:

Example 3 – fixed wrapper with a minimum of two visible images

In this example, we will define 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 define the image to be shown starting from the third one.

Remember to include the same fi 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>

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>

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

Summary

This article, explains four different image-slider plugins and their implementation. These examples are elaborative for the use of the plugins.

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here