Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Freebie: Responsive jQuery Slider Plugin Flexslider

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! Link

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.

Screenshot

Features Link

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

headshot
You can find the installation guide and documentation on the developer’s release site6.

Behind the Design Link

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 @mbmufffin7 for FlexSlider updates!”

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

Footnotes Link

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

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

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.

  1. 1

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

    0
  2. 2

    Andres Jaimes

    August 24, 2011 5:54 am

    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.

    2
  3. 3

    WebAppsLedger

    August 24, 2011 6:02 am

    Superb.. Thanks for sharing :)

    0
  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

    Sávio Mendes

    August 24, 2011 5:40 am

    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

    Jeffrey Friend

    August 24, 2011 5:44 am

    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

      Sebastiaan Stok

      August 25, 2011 12:16 am

      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

          Marko Heijnen

          August 25, 2011 2:37 pm

          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

    Hendro Prayitno

    August 24, 2011 2:09 pm

    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

      Russell Bishop

      August 25, 2011 12:11 am

      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

↑ Back to top