May 16, 2011 3

Flux Slider v1.2 Released – 3D transitions, API calls & Transition Gallery


Flux v1.2

I’m pleased to announce that Flux Slider v1.2 is now ready for release! A massive thanks to everyone who has downloaded, tweeted, blogged or emailed about Flux so far, its great to hear people like it! If you do use it in a project please do let me know, I’d love to see it in action.

Amongst the usual general tweaking & bug fixes, v1.2 brings a couple of new transition types, cube & bars3d. Both these new transitions require 3D transform support so will only work in Safari & dev builds of Chrome at the moment.

I’ve also created a new Transition Gallery that better shows off the currently available transitions. It also demonstrates the new API calls available in v1.2 which enable Flux to be controlled from other Javascript on the site.

As usual the code and docs are available on Github & a demo can be found here.

For those that don’t have a browser that supports 3d transformations, you can see a short video below:

Full Change Log

  • Flux now makes use of feature detection so that any browser that supports CSS3 transitions will now work rather than limiting it to just Webkit. For non WebKit browsers you will need to use jQuery instead of Zepto!
  • Added helper function for detecting the Transition end .transition()
  • Added helper function for adding required vendor prefixes to CSS3 .css3()
  • Modified the base transition object so that it now maintains a reference to the slider object to make it easier to access both current and next images. Previously only the current image was stored which limited what transitions could be created.
  • Added support for gracefully degrading when a transition requires 3d but the browser doesn’t support it
  • Added ‘bars3d’ & ‘cube’ 3D transitions
  • Fixed a bug where Chrome would report 3d transformation support when it didn’t. Now uses a media query to confirm support under webkit. Similar to how Modernizr works
  • Enabled transition specific parameters to be overloaded from the main constructor
  • Improved the ‘concentric’ transition so that enough circles are always created to cover the required space
  • A specific transition can now be requested instead of one being picked at random, applies to .next(), .prev(), .showImage() and .transition() of flux.slider object
  • Added isPlayer() function to determine if the slider is currently auto-progressing
  • Added the event ‘fluxTransitionEnd’ which now fires whenever a transition has completed
  • Fixed a chaining bug with .transitionEnd() helper function

Update (17th May 2011)

Thanks to Faruk Ates for pointing out that the bars3d transition had a bug when using Chrome Canary. This is now fixed and ready for download as v1.2.1.

  • Michaelbricout


    Many thanks for your slider, I really love it.

    I would like to use the same transition between each images.

    The transition I would like to use is “blocks2″.

    Can you tell me how and where I can modify the code ?


  • Joe Lambert


    Here’s some example code that does what you want to do, you will need to change the array to just contain the name of the transition you want though:

  • sanjeev9696

    3D transitions not working in latest Chrome Browser………..