8 jQuery Image Sliders with Impressive Transition Effects

8 jQuery Image Sliders with Impressive Transition Effects


8 jQuery Image Sliders with Impressive Transition Effects

Introduction

Javascript Image slider has successfully take over flash territory. Flash used to be the famous solution to make image slideshow because of its animation capability. These few years have been an exciting time for Javascript development, or maybe not, we should say it's a great year for jQuery framework and HTML5 and CSS3. The usage of jQuery framework has increased dramatically and thanks to the powerful browsers, it's possible to run sophisticated animation on a browser with Javascript. Besides that, the development of HTML5 and CSS3 have played an important role as well. More specifically, HTML5 Canvas and CSS3 3D transform have made the slider transition to a whole new level.

I managed to find top 8 image sliders with amazing and impressive transition effects. Almost all of them have more than 10 to 20 cool builtin animated transitions. Beware though, some image sliders are too advanced for your browser (especially Internet explorer) might not able to run it.

  • TN3Gallery Supported Transition: Fade, Slide, Blinds and Grid.
  • RoyalSlider RoyalSlider is responsive jQuery image gallery and content slider with touch support. It doesn't have too many fancy transitions, but all that he has look very smooth on desktop and mobile devices.
  • SkitterSkitterSupported Transition: cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, random, randomSmart.
  • Wow SliderWow SliderSupported Transition: Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear.
  • Slider.jsSlider.jsSupported Transition: Circles, squares, circle, diamond, vertical sunblind, vertical open, clock, horizontal open, horizontal sunblind, fade left, opacity, simple, zoom in, zoom out, flip, card flip, rotate and scale in, rotate and scale out, top fade, skew flip, left, top, oblique.
  • Flux SliderFlux SliderSupported Transition: bars, zip, blinds, blocks, concentric, warp, slide, swipe, dissolve, blocks2, bars3D, cube, tiles3D, blinds3D, turn.
  • Nivo SliderNivo SliderSupported Transition: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse.
  • Avia SliderAvia SliderSupported Transition: diagonal blocks, winding blocks, randomized blocks, dropping curtain, fading curtain, fading top curtain, fullwidth fade slider, direction fade slider.
  • SliceBox SliderSliceBox SliderSupported Transition: Interesting, you can make your own transition by specifying slicesCount, disperseFactor, sequentialRotaion and sequentialFactor.
  • Smart GallerySmart GallerySupported Transition: fade in, blind, appear, fill in, explode, jumble, rising bars, falling bars, paint, diagonal, crunching bars, slide in.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

14 comments

Mark Simchock
Wed, 15th February 2012
Yes, nice list. I've seen most of these. My question is, is there a library of such effects? Perhaps an open source project? I'm no javascript but since you typically only use one effect at a time on a given site the rest becomes code bloat. Why not chain (?) the effect into the plugin on an as needed basis.

One the reasons I'm asking is I'm teaching myself jQuery and working on an image "slider". I'd like to add a couple effects but from-scratch dev seems silly. There's got to be a library of such things, yes? Reply
Kevin Liew Admin
Wed, 15th February 2012
Hi Mark, I know what you want, and it actually heaps of them out there! Check out this post, I've made a roundup about it.

http://www.queness.com/post/9999/10-css-and-javascript-animation-plugins-frameworks-and-libraries Reply
Gabriel Dubois
Wed, 25th April 2012
Hi Kevin and everybody,
I am working on a template with a snow-board theme in mind and I would feature a custom-built image slider and I know it might be wrong to ask, but could you direct me to somewhere I could find some winter-sports/snow-boarding royalty free images? I will be selling the template and I wouldn't want to have to deal with purchasing the images (I am over my budget as it is). Since I am working from home, I am trying save up on the spending as much as I can (beginner freelance = opportunist) :-)
Thank you very much. Reply
John
Thu, 26th April 2012
Hi Gabriel,
I may recommend a source where I always find free assets. You can check www.creattor.com. Just a simple search and certainly you will find tones of images about winter. Usually are free for commercial use, but I suggest you to read the license twice, because some of them could be only for personal use. Reply
Vinit Pratap Singh
Thu, 16th August 2012
fantastic collection.... Reply
Neven Lovreković
Tue, 21st August 2012
Great collection, tnx! Reply
Mj
Tue, 25th September 2012
Nice collection :D
also i know another nice one. check it out here : www.cuteslider.com Reply
janser
Tue, 20th November 2012
muito bom os sliders. Reply
Jared
Wed, 6th February 2013
Awesome collection, just what I needed! Thanks for putting these together in one spot. Reply
por
Thu, 6th June 2013
Nice Collection! Cheer! Reply
Jean-Paul
Sun, 8th September 2013
Good compilation.

Mind you that the link to slider.js is dead.

Here is a working link:
http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/github-demos/slider.js/index.html Reply
aliceli
Fri, 13th September 2013
Thank you, great collection…

I also found this one very useful jQuery slider creator and it’s totally free: http://www.hislider.com

It also supports ken burns effect… WYSIWYG & Full-Customise Reply
aro
Sun, 10th November 2013
How can i donwload the slider, is if free. Reply
Fri, 14th March 2014
你的网站挺好 Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement