Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Build a responsive image slider with jQuery

Create a responsive image slider to display images to maximum effect on all devices

No matter what your proficiency, creating responsive designs can be a little confusing because of the radical change in thinking. As time goes on, responsive web design is drifting away from the pool of passing fads and rapidly entering the realm of standard practice. Simply put, this is a very different way of designing websites that represents the future. The web has moved beyond the desktop, and isn’t looking back.

Mobile traffic has exploded over the past few years, and the number of devices we’re designing for is growing just as fast! The changing landscape of web browsers matches that of users’ expectations; people expect to be able to browse the web on the move just as easily as they do on a desktop. So in this tutorial we will add one useful tool to our belt – a responsive image slider – using the open-source jQuery plug-in FlexSlider.


Getting started

To begin, locate and unzip the ‘’ folder that is supplied on the CD. Here you will see an ‘index.html’ file which is a basic HTML5 template for us to start from. We also have empty JS and CSS folders and an image folder that contains just the ‘bg.png’ image file. Open up the index.html file in your text editor of choice and take a little look at the markup.

001 <!DOCTYPE html>
002 <html>
003 <head>
004 <meta content="charset=utf-8">

Viewport meta tag

Inside the head of our document we have a meta tag called viewport. The viewport tag is there to tell the browser that this webpage is optimised for mobile devices. By setting the viewport width equal to device-width, we are essentially telling it that the device width is 320 pixels. The initial-scale property controls the standard zoom level, while the maximum-scale and user-scalable properties dictate the degree to which users can zoom in and out of the page.

001 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Head links

Underneath the viewport tag we have linked up to the jQuery CDN that we will need later, as well as a stylesheet that we will be creating in a few steps’ time. The only other thing to say here is that you will notice we have made some comments above our links. It’s not required but is certainly encouraged and we will be adding comments throughout.

001 <!-- jQuery -->
002 <script src=></script>
004 <!-- main styles -->
005 <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />

Section tag

And last of all we have used the HTML5 section tag for our main wrapper. Even though HTML5 isn’t our main focus here, it’s never a bad thing including it wherever you can. Again, make sure the closing section tag is commented so if the page gets messy, we can easily find where the wrapper ends.

001 <section id=”wrapper”>
002 </section><!– .END Wrapper –>

Default CSS

Create a new CSS file called ‘styles.css’ and save it into the CSS folder. Open the styles.css file into your text editor and add in our reset. The reset also covers some generic rules that are generally self-explanatory. However, the only rule that needs to be pointed out is the HTML5 display-role that is used to enable older web browsers to recognise any HTML5 elements as block level, like our section tag.

001 /* reset */
002 * {
003     margin: 0;
004     padding: 0;
005 }

Wrapper and body

For our wrapper rule, we need to make it 80% of the browser’s viewport and give it a maximum width of 800px. Doing this will allow it to be scalable from 800 pixels down. We then centre it using margin: 0 auto. Straight underneath the wrapper rule we can add in our background image within the body tag using the ‘bg.png’, which as mentioned earlier is already located within the image folder on the disc.

001 #wrapper {width: 80%; max-width:800px; margin: 0 auto;}
003 body {
005 background: url('../images/bg.png');
006 font-family: Verdana, 'Arial', sans-serif;
007 }

Find a font

Now jump back into the index.html file and, underneath the wrapper section tag, create an opening and closing h2 tag and type in a title. Now let’s head over to and do a search for a font called Lobster. Add this to your collection and copy and paste the link within your document’s head underneath the <!– Google fonts –> comment.

001 <!-- Google fonts -->
002 <link href='http://fonts.googleapis.    com/css?family=Lobster' rel='stylesheet' type='text/css'>

Finish the logo

Open up the styles.css file and copy and paste the font-family from Google Web Fonts. Then give it a font-size of 2.3ems and a small amount of top margin (we’ve used 50px). Once that’s done, give the title a similar colour to our background. Finally, we apply a white text-shadow to give the text a bit more depth.

001 h2 {
002     font-family: 'Lobster', cursive;
003     font-size: 2.3em;
004     margin: 50px 0;
005     color: #d1c8ba;
006     text-shadow: #fff 1px 1px;
007 }

Pick up FlexSlider

Now we need to download the FlexSlider. So head over to and grab the latest version, which at the time of writing is version 1.8. Once downloaded, locate the zipped file, unzip it and open up the folder. You will see two JS files and a CSS file. You need to put them into their respective folders within your own directory, then link them up inside the head of the index.html file.

001 <!-- FlexSlider pieces -->
002 <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen"/>
003 <script src="js/jquery.flexslider-min.js"></script>

FlexSlider markup

Adding in the markup for FlexSlider is really very simple. First, start with a containing div (<div id=”slider”>) that we can use to position the whole slider if we need to. Then we just need to add a single containing element: div class=”flexslider”; this is what we are going to use as our main hook for the JS code.

001 <div id="slider">
002    <div>
005    </div>
006 </div>

Slides list

The next step is to add an unordered list (<ul>) in which to place the images we are going to populate the slider with. Give the list a class name of ‘slides’ and add in three list items, just for now; this can be expanded on later. If you go back and take a look within the styles.css file, you will remember that we used a reset to get rid of the default bullet points of the <li> item.

001 <ul>
002     <li></li>
004     <li></li>
006     <li></li>
007 </ul>

Adding the images

Incorporating our images is very straightforward and nothing new to us. The pictures we used here are sourced from, and are available at no charge once you take a short amount of time to open a free account. Underneath the top image we have added a caption and given it a class of flex-caption. The flex-caption class is controlled with the flexslider.css file, so you will need to open that up to make any changes that are necessary.

Flexible images

One thing we should point out is that we don’t need to specify a width and height to the images within the main markup. This is very important because they need to be scalable and are controlled within the flexslider.css file. So if you open up this CSS file, you will notice on line 21 a rule that gives each image a max-width of 100%, allowing this amount of flexibility.

001 21 .flexslider .slides img {max-width:100%; display: block;}

JavaScript time

Now that we have our markup, CSS and images set, let’s add the functionality of the slider so we can see it in action. So within the head of our document (just above the closing </head> tag) type in this JavaScript code. Once you have done this, click and drag the browser window up and down to see the slider become responsive to the different browser sizes.

001 <!-- Hook to the FlexSlider -->
002 <script type="text/javascript">
003     $(window).load(function() {
004     $('.flexslider').flexslider();
005     });
006 </script>

Slider options

Like all good jQuery plug-ins, you are given plenty of extra options to customise things to your liking. All the options are located on the FlexSlider website, but just for fun let’s play around with a few. First let’s change the default animation from fade to slide.

001 <script type="text/javascript">
002     $(window).load(function() {
004     $('.flexslider').flexslider({
006         animation: "slide"
008         });
010     });
011 </script>

A vertical twist

How about we add another option? Instead of the default horizontal slide animation, let’s make it a vertical slide animation. Even though it’s not the norm, it certainly adds some originality, and if you dig a little deeper into the advanced options, you will find you could have two sliders working together – one side going vertically and the other sliding horizontally.

001  <script type="text/javascript">
002     $(window).load(function() {
003     $('.flexslider').flexslider({
005         animation: "slide",
006         slideDirection: "vertical",
008         });
010     });
011 </script>

FlexSlider styles

It’s always a good idea to open up the CSS when using any jQuery plug-in, so you can see what is doing what and perhaps customise the slider further. In this case we don’t really need to do anything drastic. But one CSS rule worth pointing out is on line 35. These are the default styles of the background and they can easily be modified if needed.

001 /* FlexSlider Default Theme
002 *********************************/
003 .flexslider {
004   background: #fff;
005   border: 4px solid #fff;
006   position: relative;
007  -webkit-border-radius: 5px;
008  -moz-border-radius: 5px;
009  -o-border-radius: 5px;
010  border-radius: 5px; zoom: 1;
012 }

Final thoughts

Image sliders play a major role in today’s web industry, and should be a feature of any designer’s repertoire. When you have an existing website with one that needs to be made responsive, having the FlexSlider plug-in at your disposal can save you an awful lot of hard work – like any good plug-in should.