When it comes to responsive design, it’s not just about fluid images or adaptive layouts. It’s also about the responsive methodology behind the entire design process. In responsive design, we are creating responsive experiences, meaning that all design components need to be able to adapt to the environment in which they are displayed and have to interact with. This is why we create tables, navigation menus, videos and other design elements responsive as well (see Responsive Web Design Techniques and Design Strategies1 for more details). It just makes sense to consider each and every design component — including the image slider.

In this post, we are glad to release a responsive jQuery slider plugin Flexslider which has been created, developed and maintained by Tyler Smith2 and released for Smashing Magazine and its readers. As usual, the plugin is absolutely free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive! It uses simple, semantic markup to create the slider and is lightweight, weighing only 5 Kb (minified). The plugin has been tested in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+. iOS and Android devices are supported as well. In three simple steps, you can have a fully responsive slider for your responsive design.

Download the Plugin for Free!

The plugin is released under the MIT license. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the plugin as you wish.

Behind the Design

As always, here are some insights from the designer:

“My motivation behind creating this plugin was the difficulty I had building my first responsive slider. There were no resources to pull from and I spent hours banging my head against the wall working through the logic. My goal was to make it easier for others doing the same thing. I wanted to build a plugin that served the newest of beginners, while providing seasoned developers a tool they could use with confidence.

FlexSlider serves beginners by being virtually plug and play, needing only the FlexSlider files and some images to get started. To seasoned developers, FlexSlider should be seen as a tool that gets them rolling quickly. It doesn’t add unnecessary markup and gives complete freedom to use any HTML element within each slide.

The most exciting thing about FlexSlider at this point, in my mind, is the slide animation. It was a challenge to construct, but the resulting responsive behavior is very cool. When you mix the slide animation with touch gestures, it creates a great experience across iOS and Android devices.

Problems I encountered when building the plugin was ensuring that the plugin would work across all different types of responsive builds, browsers, and devices. To accomplish that, I made sure the plugin did exactly what it needed too, and nothing more. For example, many sliders use fixed dimensions and absolute positioning to create animation effects, but this is not possible with fully fluid responsive design. Avoiding this practice, I limited my use of the $(window).resize() function and let the slider dimensions remain organic to the content within. The downside to this is that the fade animations can’t overlap, which is indeed a nice effect.

The most important lessons I’ve learned are that overusing (window).resize() function to control element sizing will make you cringe, which is why you won’t find much at all in FlexSlider. Keep your responsive design as light as you can. Remember the audiences you are extending to reach are on far less capable devices, especially with JavaScript.

If you are having a problem installing FlexSlider, post a comment in the Community section and I will respond. Follow @mbmufffin11 for FlexSlider updates!”

Thank you, Tyler. We sincerely appreciate your work and your good intentions.

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Paul

Andres Jaimes

Hey!, thanks… this week I was working on updating my blog and was implementing technologies like HTML5 and aria. Since I’m a part time photographer, I was looking for a nice slider that could work even on the small devices… this will be a great addition to my site…

Sávio Mendes

Pretty cool but somethings should be implemented differently…
I should be able to use whatever class I want to in the ul (and the function receive this class via parameter) and the parent div should be inserted by the function itself, instead of having to be in the html code already..
I will post this up to the developer.

Razer

Jack Nycz

“HEY I’M GEORGE AND I READ SLIDER AND NOTHING ELSE AND NOW I’M MAKING A BLANKET STATEMENT ABOUT SLIDERS.” It’s responsive, mobile optimized and still manages to maintain a relative simplicity to it – it’s not reinventing the wheel, its rounding it off.

gaspas

Todd Zaki Warfel

Except that your jQuery Cycle examples aren’t adaptive/responsive. That’s the primary difference/point of this plug-in. My only request is to include a timer function that automatically sets the slides to transition after 7000ms or something.

m

Joey

No it doesn’t, that’s why it’s so choppy on my iPad 1. Plus it’s absolutely not “responsive”. It shouldn’t fade but slide following the finger, just like the photos on the iOS album.
But hey ! Photos of cakes => android wink-wink => no taste at all.

Sebastiaan Stok

Hardware acceleration is something the browser does, you can not force this.

“It shouldn’t fade but slide following the finger, just like the photos on the iOS album.”
Apparently you, think just because you have iPad everything will slide.

In applications this maybe true, but websites need to explicitly support this (it’s an animation). I’m surprised that you know jQuery, but don’t now that is there a great difference between application and a website.

Tedd mentioned a great plugin that supports this, but that costs money and this one is free.

“Apparently you, think just because you have iPad everything will slide.”
No, i mean that fingers are for direct manipulation of objects. Just like drag’n’drop : you move what’s behind the mouse, you expect that behavior. Not a transition between two states with nothing in between.

Tedd Magwell

Christina

Royal Slider, the one touted as a touch slider that’s responsive does not scale down images, it scales down the div surrounding the images (just like NivoSlider), so basically it chops off the images. Not a good solution.

Tyler

Russell Bishop

This isn’t about the design you moron, this is the first (that I’ve seen) fully responsive slider, with next/prev controls and 2 types of transition. All in all, a really goddamn helpful plugin that’s been a long time coming.

Jeff Haydn

Looks like it is a good time to make a comparison review of all the available “sliders” since definitely a gap that has a high demand to be fulfilled. Just sent to SmashingMagazine editorial team this week link to the freebie TouchSlider jQuery plugin from MobilizeToday: https://github.com/mobilizetoday/touchSlider

Michael Schuh

Nick

First of all thanks for this really nice plugin. I’ve tested it on mobile devices and desktop devices and it looks great! But I have just one question, I’ve tested it also on IE7 and IE6 and in IE6 it’s totally broken and in IE7 there is just a minor bug.
Are there intentions to fix this or is it only supported from IE8?

Damn those muffins look good on Flexslider!

0

48

Rory

Angela Giese

Thank you, thank you, thank you for this slider!!! I’ve been struggling with what to do about sliders on my responsive websites. Hide ‘em on small windows? Find some Javascript to sense what the screen size is and not run the slider script for small devices? Well now I don’t have to worry anymore. Thanks again!

nomad-one

Really great that developers are sharing their hard work, thanks a ton. I’ve been sorely in need of some responsive alternatives. Looking for a slidedeck accordion for responsive layout currently, nothing which works well out there

George

Great plugin! I can see from the developer notes that this is quite customisable. Is it possible to replace the dots with a text list? So this could be linked into a more user friendly navigation (where necessary?)

0

60

kyril

J Curtin

I’m implementing the flexslider on my site. This is the first time I’m working with a JQuery slideshow. Do my images need to be the same size if I want them to take up the space of my containing div? Do most slideshow add-ons out there need to have the pictures resized to this size? I was looking for a way that I could feed in images, and if they were bigger than the container, they would resize automatically.

kunalworks

I want to continue the slide show even on manual interaction. I am setting the pauseOnaction to false, which works on regular browsers but on iphone/android it doesn’t work. How can i continue playing ? any ideas?

Thanks

0

65

Mike

Greg

Everything works fine until I add my own images. My images are all the same size but a different size than in the demo. They display and rotate correctly, but the user controls no longer work. Any Ideas?

Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.

Meet Smashing Book #5, our new book on real-life responsive design. With front-end techniques and patterns from actual projects, it's a playbook to master all the tricky facets and hurdles of responsive design. Save 25% today.

Fixing RWD issues can be quite easy — once you understand exactly why they come up. The Mobile Web Handbook will help you understand technical issues on mobile and how to deal with them effectively.

Hungry for more content? Over 60 eBooks are waiting to be discovered in our lovely Smashing Library. And guess what? You can watch Smashing Conference talks there, too.

SmashingConf isn't the eighth wonder of the world, but we are pretty close. Join us at at the shores of Santa Monica for SmashingConf LA on April 27–30 or at SmashingConf NYC on June 15–18. You won't be disappointed.