Building Responsive Image Sliders

Exclusive offer: get 50% off this eBook here
Responsive Web Design with jQuery

Responsive Web Design with jQuery — Save 50%

Learn to optimize your responsive web designing techniques using jQuery with this book and ebook

$26.99    $13.50
by Gilberto Crespo | November 2013 | Web Services Open Source

The image slider has been used a lot and has become a very popular web element. On a website, with beautiful transitions and animations, captions and descriptions, and the use of custom timings, an attractive business presentation is delivered online. Also, a good image slider can display a product showcase, catches the user's attention, and improves its sale.

In this article, by Gilberto Crespo, the author of Responsive Web Design with jQuery, we will learn about:

  • Different types of responsive image sliders
  • Introducing touch gestures in user experience
  • Implementing touch events with JavaScript plugins

(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:


Responsive Web Design with jQuery Learn to optimize your responsive web designing techniques using jQuery with this book and ebook
Published: November 2013
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


Gilberto Crespo

Gilberto Crespo is a skilled frontend developer who started frontend developing using CSS2, HTML4, and tableless HTML in 2005. He has always focused on increasing his knowledge by following strong trends, such as HTML5, CSS3, and jQuery. In the past five years, he has helped improve the web development process by creating and spreading best development practices for CI&T where he currently works. For the past two years, he has been working exclusively on responsive websites on the job and supporting other web developers by answering questions on responsive websites. He has been connected with new technologies and design trends.

He is passionate about creating themes for Drupal CMS and websites' look and feel in general since 2011. Currently, he is writing technical articles and giving presentations in Brazil, sharing his knowledge with students and with the Drupal community and friends.

Outside of work, he enjoys a normal life, trying to learn something new every day.

Feel free to contact him at www.gilcrespo.com.

Books From Packt


HTML5 and CSS3 Responsive Web Design Cookbook Benjamin LaGrone
HTML5 and CSS3 Responsive Web Design Cookbook Benjamin LaGrone

Responsive Web Design by Example
Responsive Web Design by Example

Instant Responsive Web Design [Instant]
AJAX and PHP: Building Responsive Web Applications Bogdan Brinzarea, Cristian Darie, Filip Cherecheş-Toşa, Mihai Bucica

jQuery UI 1.7: The User Interface Library for jQuery
jQuery UI 1.7: The User Interface Library for jQuery

AJAX and PHP: Building Responsive Web Applications
AJAX and PHP: Building Responsive Web Applications

Instant HTML5 Responsive Table Design How-to [Instant]
Instant HTML5 Responsive Table Design How-to [Instant]

Developing Windows Store Apps with HTML5 and JavaScript
Developing Windows Store Apps with HTML5 and JavaScript

HTML5 Mobile Development Cookbook
HTML5 Mobile Development Cookbook


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
x
A
Y
E
5
m
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software