Skip to main content

22 brilliant jQuery plugins

There have been tens of thousands of jQuery plugins written for the jQuery library. Created in 2006 by John Resig, the jQuery library is one of the most popular JavaScript libraries. It's a fantastic resource for designing and developing user interactions quickly. Whether it's an image gallery or form, content-revealing CSS animation or an explosion effect, the library provides the core building blocks to allow you rapid prototyping and to deliver a unique user interface with minimum code and effort.

However, just because you can create your own solution to any given problem, does that mean you should? Of course not! There's absolutely no need to reinvent the wheel every time you want to create a bit of common functionality; use plugins to instantly add a behaviour. Doing so will save you even more time and effort. Below is our list of useful jQuery plugins. Most are free, too. 

For more useful web design resources, explore our list of the best web design tools, best JavaScript APIs  and our pick of the best JavaScript frameworks to consider. 

01. CZM Social Chat Support

jquery plugins

Add chat plugins to your site easily (Image credit: CzMMedia)

This social chat support jquery plugin enables you to add support for unlimited social accounts including Whatsapp, Messenger, Skype, Twitter, Telegram and Instagram. It's easy to set up and you can customise the buttons as you wish. Unlike most of the plugins in this list, it's not free, and will cost you $9 to download.

02. RTO+P Video Player

jQuery plugins: RTO+P Video Player

Make your own video player rather than rely on YouTube embeds (Image credit: RTO+P)

Sure, it's easy to embed video from YouTube or wherever, but if you want a little more control over your video then RTO+P Video Player is a must. It makes it easy to build and customise your own video player that gets its video either from your own server or CDN, or from a public Vimeo stream. Use the HTML5 video tag to make life easy, or for better performance you can use the lazy load option.

03. Slick

jQuery plugins: Slick

Whatever carousel you need, make it with Slick (Image credit: Ken Wheeler)

Is this the last carousel you'll ever need? It certainly could be; Slick's a jQuery plugin that gives you fully responsive carousels of just about every kind you could wish for, with all sorts of options to play with including lazy loading, autoplay, callbacks and more.

04. Muuri

jQuery plugins: Muuri

Muuri's flexible layouts are responsive, sortable, filterable and draggable

For the ultimate in flexible layouts, Niklas Rämö's Muuri is well worth a look. Its layout system enables you to position grid items of assorted sizes within a container in pretty much any way imaginable, and it's responsive, sortable, filterable and draggable. By default it'll arrange everything in a 'fit first' manner, but you can add your own layout algorithm for a different layout style.

05. Timeline.js

timeline.js

Timeline does exactly what it says on the tin, and creates a timeline slider

This jQuery plugin offers a twist on the carousel component: Timeline.js provides you with everything you need to create a carousel timeline (i.e. a slider that progresses based on chronological points). It includes plenty of visual and functional customisation options.

06. Tilted page scroll

tilted page scroll

Tilted page scroll adds a neat 3D effect to your pages

This plugin from Pete R. is an excellent way to grab people's attention and add a little extra depth to your site. With it installed, items will tilt into view as they scroll up the page, and tilt again as they scroll out of the top of the page. It's a great-looking effect that's nice and easy to implement.

07. Focuspoint

focuspoint jquery plugin

Say goodbye to badly-cropped responsive images

The great thing about responsive web design is being able to create a single page that'll look good on any device. However if your site's automatically cropping images to fit certain viewports, it can often lose the focal point. With Focuspoint, you can make sure your image looks great in any container by specifying a focal point for each image, and the plugin will crop out unwanted parts before the important bits.

08. SVGMagic

SVGMagic jquery plugin

SVGMagic creates PNGs to replace SVGs where they are not supported

Using SVG images is a good idea because they will look sharp at any size, and this plugin helps you to do that without having to worry about browsers that don't support them. It searches for SVG images and replaces them with PNG versions if SVG isn't supported. 

09. Face Detection

Face Detection jQuery plugin

This plugin provides an easy way to use some powerful technology

Detect and get the coordinates of human faces in images, videos and canvases with this plugin, which was written by Jay Salvat and uses Liu Liu's face detection algorithm. 

10. Round Slider

rounderslider jQuery plugin

The slider can be themed to suit your purposes

This circular slider enables the user to select a range of values by mousing over the circle. The full slider is the default setup, but you can also use it to get quarter-circle, half-circle and pie shapes. There are CSS styles you can adjust to theme it in various ways, for example, to look like a speedometer. No images are involved; it's all made with CSS and JavaScript. 

11. jInvertScroll

jinvertscroll jQuery plugin

Get a parallax effect with ease

jInvertscroll makes it easy to implement horizontal scrolling with a parallax effect. Roll your scroll wheel on their demo site to whizz along sideways while two layers of landscape move at different speeds to create an illusion of depth. 

12. Slinky

jQuery plugins: Slinky

A menu design that won't go out of style?

Slinky is an elegant, timeless menu design that's useful for any scenario in which you've got a lot of sub-menus. Select an item and an animation slides the sub-menu over. There's a demo here.

13. TwentyTwenty

jQuery plugins: TwentyTwenty

ZURB's plugin helps you compare images

Instead of placing two images side-by-side to show the differences between them, you can use this plugin which places one on top of the other. Users drag a slider so that the bottom image shows through, enabling them to see what has changed in a before-and-after situation.

14. Material design hierarchical display

jQuery plugins: hierarchical display

Animations can help to guide users' attention

Hierarchical display animation effects can be used to guide users' attention and lead them from one point to the next in a process. This animation can be customised to suite your design, and has great documentation to get you going.

15. Tabslet

jQuery plugins: Tablset

Minimalist tab design

As the name suggests, Tabslet is a lightweight plugin for making tabs. It supports next/previous controls, rotation, custom events, deep linking and there’s lots of other useful functionality. Have a look at the demo to see if it suits your needs.

16. nanogallery2

jQuery plugin nanoGALLERY

A fully-featured, fast image gallery

nanogallery2 is designed to simplify your image galleries, and offers multi-level navigation in albums, lightbox, combinable hover effects on thumbnails, slideshow, fullscreen, pagination and image lazy load. It is touch-enabled, responsive, fast and it supports cloud storage.

Version 2 offers improved user experience, and new features such as filter by keywords, a shopping cart, social sharing, advanced hover effects, thumbnail display transitions, an info page with Google Maps location, and more.

17. Tooltipster

jQuery plugin Tooltipster

Fancy tooltips with Tooltipster

Tooltipster is a modern take on the classic tool-tip, allowing you to present fully HTML-enabled tooltips in semantic markup with CSS used to control the display. There are a wide range of configuration options, making it customisable for any scenario.

18. Magnific Popup

jQuery plugin Magnific Popup

A lightweight, performant lightbox

This is a lightbox plugin for jQuery that focuses on being as lightweight and compatible as possible. The developer has concentrated on performance and user experience, so it doesn't have all the features of alternative lightbox plugins, but it is super-fast and works perfectly across a huge range of devices, including High-DPI (Retina) devices such as the MacBook Pro.

19. jQuery Knob

jQuery plugin Knob

Touch-friendly dials that also work on the desktop

jQuery Knob takes input elements and converts them into touch-friendly dials that also work on the desktop. This is an excellent example of how you can tailor your content to suit new paradigms, and is worth a look for the technical approach if nothing else.

20. Typeahead.js

jQuery plugin Typeahead

Handy auto-complete tool built by Twitter's dev team

The product of Twitter's development team, Type Ahead is an easy-to-implement tool that pulls from a local or external data source as your user types in to an input box, providing auto-complete suggestions as they go.

21. Lettering.js

jQuery plugin Lettering

Get fine control over your type

Lettering.js provides granular control over individual characters in your type, allowing you to apply kerning, colour individual letters, and apply event-listeners. It also plays nicely with FitText (below), giving you desktop-style control over your typography while remaining responsive.

22. FitText

jQuery plugin FitText

Automatically scale your text for responsive headlines

This handy plugin allows you to fill your container's width with your type but automatically scaling the text size up or down to suit. Designed to facilitate responsive headlines, the plugin also integrates with Lettering.js to allow for granular per-character styling.

Related articles: