Freebie: Responsive jQuery Slider Plugin Flexslider

Advertisement

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.

3

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.

Screenshot4

Features

  • Simple, semantic markup.
  • Supported in Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, and IE7+.
  • iOS and Android devices are supported as well.
  • Slide and Fade animations.
  • Highly customizable slider options.
  • Directional, keyboard, and touch swipe navigation.
  • Lightweight (5 Kb minified).
  • You can use all HTML elements in the slides.
  • Free to use under the MIT license.

headshot9
You can find the installation guide and documentation on the developer’s release site10.

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.

Footnotes

  1. 1 http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
  2. 2 http://www.madebymufffin.com
  3. 3 http://flex.madebymufffin.com/demo/
  4. 4 http://flex.madebymufffin.com/demo/
  5. 5 http://flex.madebymufffin.com/demo/
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/uploader/images/flexslider/full_preview.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2011/08/Flexslider-jQuery-Plugin.zip
  8. 8 http://flex.madebymufffin.com
  9. 9 http://flex.madebymufffin.com/demo/
  10. 10 http://flex.madebymufffin.com/
  11. 11 http://www.twitter.com/mbmufffin

↑ Back to topShare on Twitter

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.

Advertising
  1. 1

    Great plugin, been searching for this solution recently answers all problems I encountered.

    -1
  2. 2

    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…

    thanks a lot.

    1
  3. 3

    Superb.. Thanks for sharing :)

    -1
  4. 4

    Thank you for this freebie! It’s great! Simplicity is difficult to achieve, but worth the effort for sure. Thank you Tyler and to Smashing for releasing this great plugin!

    0
  5. 5

    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.

    0
  6. 6

    Awesome! I have 2 projects in development right now that this is perfect for. Thank you Tyler & Smashing Mag!

    0
  7. 7

    That’s really simple and great slide show love it :)

    0
  8. 8

    “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.

    0
  9. 10

    This is really awesome, and it looks great even on my HTC phone.

    0
  10. 11

    Houston Web Designer

    August 24, 2011 8:52 am

    Nice slider plugin. Hope to use it soon, looks like it can be used for some fun things.

    0
  11. 12

    No fallback with pure CSS if JavaScript is disabled :(
    Use this to improve plugin architecture as well: https://github.com/zenorocha/jquery-boilerplate :)

    Thanks for a cool plugin anyways! :D

    0
  12. 13

    Would it be difficult to make this full screen (and still scalable) assuming the images were high resolution?

    0
  13. 15
    • 16

      Cycle is very good but not fits in responsive design, I hope soon it becomes.

      0
    • 17

      Todd Zaki Warfel

      August 25, 2011 4:26 am

      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.

      0
      • 18

        If you are referencing FlexSlider Todd, that is already in place. You have control over the speed, and usability options of how it stops while users interact.

        0
  14. 19

    nice. just in time. :D

    does it use hardware acceleration? it does not look like it.

    0
    • 20

      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.

      P.s : jQuery ? On mobile ? Seriously ?
      And no vertical scroll blocking while swiping ?

      P.P.S : Steve Jobs resigns so i’m really pissed off… people who don’t pay attention to details are going to suffer for at least one week ! :-D

      0
    • 21

      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.

      0
      • 22

        the iscroll carousel does use hardware acceleration:
        http://cubiq.org/dropbox/iscroll4/examples/carousel/

        i’m no expert so i don’t know how that one works and how hard it would be to build it right into the flexslider.

        0
      • 23

        “Hardware acceleration is something the browser does, you can not force this.”
        Of course you can ! Use CSS3 !
        You can even see what’s hardware accelerated : http://mir.aculo.us/2011/02/08/visualizing-webkits-hardware-acceleration/

        “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.

        0
        • 24

          They use javascript animation. They should use CSS3 animation as first and fallback on javascript. CSS3 gives you hardware acceleration.

          I agree with Joey. When using a finger I expect that it would slide. Probably you then should only use it with slide animation and not with fade. A nice to have would be blocking touch movements.

          Using jQuery is a good thing. You aim for all browsers including mobile. This doesn’t mean mobile should be your aim.

          0
  15. 25

    Cool slider, btw take a look at new slider on codecanyon that has mobile touch support and responsive layout – goo.gl/Q2ybr

    0
    • 26

      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.

      0
  16. 28

    Umm, where do I get that awesome cupcake with the donut on top?

    0
  17. 29

    Just the thing I was looking for my new design!! Thanks a lot !! It’s amazing, that example is pretty cool !!

    I was in need of a slider like this with pictures and captions as well and got this on the very right time!!

    0
  18. 30

    Like it, like it.. i like it!! but I still find uncomfortable at 320px, now responsive first. I’ll wait for canvas html5 games and text. Thank’s
    http://discrimate.tk/responsive-html5-canvas-text-animation/

    0
  19. 31

    thanks for the share :-)

    Plug-in seems really simple to use.

    Another plug-in that I found extremely easy to use, with less mark-up and has both sliding and fading functionality is this one http://css-plus.com/examples/plugins/PlusSlider/

    well worth a look

    0
  20. 33

    Yes, nice design, looks pro. But I don’t see any innovation. Just reinventing the wheel.

    0
    • 34

      I agree, its not innovative. I merely packaged simple techniques and logic into a plugin for people to enjoy.

      0
    • 35

      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.

      0
  21. 37

    Just in time! Thank you very much for sharing!

    0
  22. 38

    Thanks for sharing your plugin. Another good plugin I’ve used that provides a responsive slider is Blueberry – http://marktyrrell.com/labs/blueberry/

    0
  23. 39

    Good efforts in creating the nice plugin page :-)

    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

    Check out some demos at http://widgets.mobilizetoday.com/widgets/image-gallery.html from your smartphone of choice to see the difference :-)

    0
  24. 40

    This is absolutely amazing and awesome slider! Thanks for sharing!

    0
  25. 41

    Why invent the wheel ? “Jquery Cycle” do that already !!

    0
  26. 42

    Hey, thanks for the effort man. I have been looking for a slider and this one looks even better than the ones I had found! FlexSlider FTW! xD

    0
  27. 43

    been looking for this kind of slider, this is awesome. How about fancybox? How can you make it responsive? Thanks!

    0
  28. 44

    What a neat little feature. Simple and clean

    0
  29. 45

    This is a real beauty, it could be just what i’ve been looking for on my current project,
    thanx SmahingMagazine and Tyler

    0
  30. 46

    BIG THX!

    0
  31. 47

    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
  32. 48

    Super sweet works like a dream

    0
  33. 49

    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!

    0
  34. 50

    Anyone else having issues using this with safari 5. The slider does not display when I view it in Safari 5. It works great is all other browsers I have tried it on.

    0
  35. 51

    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

    0
  36. 52

    Hi..
    Thanks for sharing this information and resources it’s really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

    0
  37. 53

    Mystery buttons should not be used for navigation. Thumbnails are far superior. I’m surprised this passed muster as a freebie.

    0
  38. 54

    Thanks for sharing your plugin..
    Such a lovely post..this is awesome.

    0
  39. 55

    Great plugin, love it. Hopefully thumbnails will be added to a future release, as I would prefer those to the radio buttons. Nonetheless excellent work and I am extremely grateful!

    -zach

    0
  40. 56

    thank you. I love jquery.

    0
  41. 57

    Hey there! :)

    Anyone an idea how I can get rid of the dots?

    When I use the flexslider I get dots for every li I use… I know it should not do that, but it does. Any idea?

    Greetings,
    André

    0
    • 58

      Your original post was last years, but I’m hoping you found a fix for the dot thing and still remember what you did. And if so, could you share with me your solution to removing the dot.

      Thanks,

      Gene

      0
  42. 59

    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
  43. 60

    Will it hold a row of images, and slide them one at a time?
    Examples only show single images replacing each other.

    Thanks!

    0
  44. 61

    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.

    0
  45. 62

    any chances of you updating this to use CSS3 animation when available then falling back on jquery. CSS3 uses hardware acceleration as mentioned earlier in the comments.

    0
  46. 63

    jQuery Mouseswipe with touch

    It’s not open source but this plug-in works on all browsers plus ipod, ipad, android devices and is under 4kb. Jquery MouseSwipe with touch, vertical or horizontal.

    0
  47. 64

    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
  48. 65

    It appears that your demo example is down.

    0
  49. 66

    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?

    0
  50. 67

    @Nick: would not expect any good things to work on IE6.

    I tell my clients: IE8 and only are supported, 7 in a minimal fashion. If they’re married to IE6, we’re not a good fit.

    Also: Chrome Frame is your friend here.

    0
  51. 68

    implemetation?

    0
  52. 69

    I installed this FlexSlider, then I didn’t like it, then I switched over to NivoSlider and apply a TouchSwipe plugin with it. Then I didn’t like it. And then I went back to this FlexSlider.

    0
  53. 70

    Nice slider…
    but its doesn’t have floated example with content…

    0
  54. 71

    Awesome it works great on mobile devices, really saved me tones of time.

    Thx for sharing.

    0

↑ Back to top