“If you go back back a few hundred years, what we take for granted today would seem like magic – being able to talk to people over long distances, to transmit images, flying, accessing vast amounts of data like an oracle. These are all things that would have been considered magic a few hundred years ago.”
– Elon Musk
An image, as we all know, is worth a thousand words. Our brains are designed in such a way as to store visual memories much better than any other kind, and good websites are built with that fact in mind.
The right mixture of image and word is pivotal to a site’s success, and once you have that down, it is time to think about presentation.
Fonts are the way you present text, but what about images? How do you go about presenting the images in such a way that it will add to the overall experience a user has with your website?
One possible answer to that question is jQuery image slider plug-ins.
There are thousands of plug-ins out there, so to make your life just a little bit easier, we decided to go on a little treasure hunt for free jQuery image sliders. We have gathered 20 of what we think are the best ones out there, and we are going to present them to you, hopefully helping you save precious hours you would rather invest in work or, dare we say it, relaxation.
1. ThreeSixty Slider
“This is a jQuery plug-in to create 360 degree product image slider. The plug-in is full customizable with number of options provided. The plug-in have the power to display images in any angle 360 degrees. This feature can be used successfully in many use cases e.g. on an e-commerce site to help customers look products in detail, from any angle they desire.”
2. Wallop Slider
“Recently there has been a lot of talk about progressive enhancement, mobile first, responsive sites, performance optimisation and a whole lot of other stuff that we all do. Or at least like to think we do. There are loads of sliders/carousels out there, seriously. More sliders than anything else. More sliders than developers. So that’s why I decided to also make one, why not? Surely one more won’t hurt anyone.”
“Adaptor is a light-weight content slider that aims to provide a simple interface for developers to create cool 2D or 3D slide animation transitions. Currently, I’ve only added 3D support for webkit and Firefox, all other browsers will fallback gracefully to a simple fade transition when using the 3D effects. All 2D slide transitions have been tested in IE6+ and all other modern browsers.”
4. Scattered Polaroids Gallery
“A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.”
5. Vertical News Slider
“A jQuery and CSS3-based slider module that displays news headlines on the left along with a preview image and brief description on the right. The “current” item is highlighted and switches automatically at intervals.”
6. Hi Slider
7. HTML5 Slideshow with Canvas and jQuery
“As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.”
8. Wow Slider
“WOWSlider creates not only fantastic looking sliders but ones that are optimized for performance, accessibility, and built with all the latest features and functionality. WOWSlider allows you with the simple click of the mouse to make an endless amount of adjustments to your slider.”
“Likno Web Scroller Builder is a user-friendly interface (GUI) to the popular jQuery library, that allows you to create stylish, feature-rich, cross-browserhtml scrollers/sliders for your web pages, with minimal effort and coding.”
10. Full-Width Image Slider
“This slider has a 100% width layout and it is responsive. It operates with CSS transitions and the image is wrapped with an anchor. The anchor can be replaced by a division if no linking is needed. With a max-width set to 100%, the image will size down for smaller screens.
“StackSlider is a highly experimental jQuery image slider plug-in that explores a different and fun viewing concept for thumbnails, utilizing CSS 3D transforms and perspective.”
“ResponsiveSlides.js is a tiny jQuery plug-in that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft’s Build 2012 and Gridset App.”
“Camera slideshow is an open source project, based on Diapo slideshow, but improved a lot.”
“Blueberry is an experimental open source jQuery image slider plug-in which has been written specifically to work with fluid/responsive web layouts.”
“FractionSlider is a jQuery plug-in for image/text-sliders. It allows you to animate multiple elements per slide. You can set different animation methods like fade or transitions from a certain direction. Also there are options to specify delays and easing for each element. You have full layout and design control through html and CSS (every html-element can be animated).”
That wraps up our presentation of 15 free jQuery image sliders. We hope you found the perfect plug-in for your project on this list, and that maybe you will come back to it for your future projects.
Please let us know if you found this round-up helpful, in the comment section below.