Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
7th June 2012

Build a responsive image slider with jQuery

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

Build a responsive image slider with jQuery

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.

DOWNLOAD THE FULL CODE

Getting started

To begin, locate and unzip the ‘start.zip’ 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= https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js></script>
003
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;}
002
003 body {
004
005 background: url('../images/bg.png');
006 font-family: Verdana, 'Arial', sans-serif;
007 }

Find a font

Build a responsive image slider with jQuery

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 www.google.com/webfonts 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

Build a responsive image slider with jQuery
Now we need to download the FlexSlider. So head over to flex.madebymufffin.com 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>
003
004
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>
003
004     <li></li>
005
006     <li></li>
007 </ul>

Adding the images
Build a responsive image slider with jQuery

Incorporating our images is very straightforward and nothing new to us. The pictures we used here are sourced from www.sxc.hu, 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
Build a responsive image slider with jQuery

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() {
003
004     $('.flexslider').flexslider({
005
006         animation: "slide"
007
008         });
009
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({
004
005         animation: "slide",
006         slideDirection: "vertical",
007
008         });
009
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;
011
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.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Pingback: ux ui news » Build a responsive image slider with jQuery

    • Dave

      I purchased edition 195 and tried this and the images do not vary as you state when you move the browser window up and down, so I tried the index.html in the finish folder (on the CD) which I believe you would have completed and this too did not vary the image when moving the browser window up and down ie the slider was not responsive to different browser styles. I tried this in the latest versions of firefox and explorer.

      Can you advise if there is something I am missing?

      Best Regards
      David

    • http://www.neilrpearce.co.uk Neil Pearcecom

      @David,

      Have you tried downloading the tutorial files from here. There is a zipped folder called ‘finish’ that you can unzip and see if you have done something wrong. If the image is not responsive then you probably haven’t specified it as 100% in width?

      - Neil

    • Pingback: 10 Ways To Add A Modern Touch To Your Website Today

    • http://kurtiskemple.com Kurt

      You may not post this comment but the title should be updated to How to use a responsive slider. This is not at all about how to “build” one. Very disappointing and misleading.

    • johnbhartley

      this should be renamed to “Build a Responsive Image Slider with FlexSlider”, very misleading

    • http://kursuswebdesign.co/ Kursus Web Design

      I think i will create slider for my website http://kursuswebdesign.co using it.

    • Robert White

      I tried the flexslider live demo on my desktop and the next/previous buttons didnt work! I’m not spending time installing this if the live demo fails for me!! Shame – looked good too. Anyone else having similar issues?