48 Best Responsive jQuery Plugins

Here are 48 best jQuery plugins for responsive web design.

Naver

Naver is an easy way to turn any navigation system into a responsive-ready, mobile-friendly toggle.

naver

jQuery Picture

jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.

jquery-picture

FlowType.JS

Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size—and subsequently the line-height—based on a specific element’s width. This allows for a perfect character count per line at any screen width.

flowjs-79

Ultimate Grid Responsive Gallery

This is a HTML | CSS | JQuery Grid with a Lightbox, you can specify thumbnails for the grid and when you click on it to open the lightbox it will load the normal image, you can specify the text for the captions and for the lightbox. Also you don’t have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first load and the number of images to load when you click the “load more images” button.

jquery-plugins-july-5

dylay

A responsive “dynamic layout” jQuery plugin.

dylay-8

pickadate.js

The mobile-friendly, responsive, and lightweight jQuery date & time input picker.

responsive-date-picker

slimMenu

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.

slimmenu

S Gallery

A Responsive jQuery Gallery Plugin with CSS3 Animations.

s-gallery

Magnific Popup

Magnific Popup is a responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device (Zepto.js compatible).

lightbox

bxslider

bxslider is a fully responsive jQuery Slider Plugin that allows you to create a content slider which can contain images, video, or HTML content.

bxslider

Sidr

The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive

sidr

Cool Kitten

Parallax scrolling responsive framework.

coolkitten

Flexisel

As long as there has been jQuery there have been image carousels created with jQuery. The famous jCarousel has been out since 2006, the same year the first version of jQuery was released. However, with the explosion of users now using their mobile devices for their internet browsing — on iPhones, iPads, and the like — it becomes necessary for jQuery plugins to support a good user experience on these devices. Enter Flexisel, the responsive image carousel with options specifically available for adapting the carousel for mobile and tablet devices.

carousel

unslider

Fluid, flexible, fantastically minimal. Use any HTML in your slides, extend with CSS. You have full control.

slider

All Around

All Around content slider is a multi-purpose all-in-one slider solution for your website. It supports both images and video. It can be an easy and effective solution for your shop related website as you can display your products in an interesting and eye appealing way. All Around carousel is perfect for almost all type of websites and it can fit perfectly into all business areas. You can display your company services, personal portfolio, sport products, health services, real-estate properties, vacation/holiday offers, cooking recipes and much much more.

allround

ResponsiveSlides

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside ul. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size.

responsive-jquery-plugins-1

Responsive jQuery Masonry

Pinterest-style layout with responsive design.

responsive-jquery-plugins-2

Carousel

Carousel takes simple HTML- and CSS-only carousels and progressively enhances them with features such as page lists, scrolling, class-toggling, timers, timer offsets as well as touch and keyboard events. By following a basic HTML pattern and using some basic CSS, your carousels will also work, to a degree, without JavaScript enabled.

responsive-jquery-plugins-3

ReView

ReView is a dynamic viewport system that provides efficient responsive web design viewing choice.The system provides both initial ‘Opt-In’ and ‘Opt-Out’ responsive design states.

responsive-jquery-plugins-4

Responsive-Measure

Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.

responsive-jquery-plugins-5

Freetile

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.

responsive-jquery-plugins-6

HorizontalNav

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy and adds support for IE7.

responsive-jquery-plugins-7

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

responsive-jquery-plugins-8

Isotope

Isotope: An exquisite jQuery plugin for magical layouts

responsive-jquery-plugins-9

Responsive google maps

Well, when scrolling a website on your mobile device you can get trapped in a google map due to the Maps scrollbar of death™. This plugin gives you a native google maps on your website and a safe fallback to the static image API of google maps for smaller devices.

responsive-jquery-plugins-10

ThumbFx

Enrich your website experience with ThumbFx, a jQuery animation plugin that brings your images and content to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops.

responsive-jquery-plugins-11

uSquare

uSquare is a responsive squared grid that can display your content in a unique and interesting way. You can use it for displaying team members, products, services, designs, blog posts or anything else that comes to your mind. In our live preview we have included 3 modifications of the original file in order for you to see how uSquare can serve your purpose.

responsive-jquery-plugins-12

Flare

Flare – a custom responsive, touch enabled, mobile optimized lightbox jQuery plugin, which can be used to display single images/videos or entire galleries.

responsive-jquery-plugins-13

jQuery OneByOne Slider Plugin

The OneByOne Slider is a lightweight, responsive & layered jQuery plugin you can use to display your image and text one by one. The CSS3 animation is driven by Animate.css. It’s mobile friendly, which support wipe left/right on your touch device like iPhone & iPad. You can drag and drop to navigate with your mouse too.

responsive-jquery-plugins-14

Grid—A—Licious

The plugin is totally rewritten and the biggest change since the previous versions of Grid-A-Licious (and other similar plugins) is that the items in the grid aren’t using absolute positioning any more. They’re all floating. This will help many of you who are struggling with the grid content overlapping each other while loading. Also, this will probably speed up things as well.

responsive-jquery-plugins-15

blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

responsive-jquery-plugins-16

PageSlide

a jQuery plugin which slides a webpage over to reveal an additional interaction pane.

responsive-jquery-plugins-17

Flexslider

An awesome, fully responsive jQuery slider plugin.

responsive-jquery-plugins-18

carouFredSel

jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it’s responsive too.

responsive-jquery-plugins-19

jQuery Responsive Menu Plugin

A Plugin which turns your site’s navigation into a dropdown select when your browser is at mobile widths.

responsive-jquery-plugins-20

Responsive Image Maps jQuery Plugin

Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize

responsive-jquery-plugins-21

slabText

SlabText is a plugin that combines FitText with Erik Loyer’s slabtype algorithm, so anyone can create big, bold, responsive headlines.

responsive-jquery-plugins-22

Camera

Camera slideshow is an open source project, based on Diapo slideshow, but improved a lot.

responsive-jquery-plugins-23

FitVids.JS

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

responsive-jquery-plugins-24

jQuery Responsive Thumbnail Gallery Plugin

jQuery Plugin for creating image galleries that scale to fit their container.

responsive-jquery-plugins-25

responsejs

Response JS is a lightweight jQuery (or Zepto) plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media) progressively via HTML5 data attributes. Its methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

responsive-jquery-plugins-26

Responsive Content

Responsive Content is used to load content that is appropriate to the current device’s screen size. It is typically used alongside Responsive Design techniques. Note however that Responsive Design and Responsive Content act on different levels: given a particular screen width, the former applies a particular styling to the same content – whereas the latter actually loads different content. It can be used subtly – for example to cause smaller images to be loaded on smaller devices – or to deliver radically different content to different screen widths or device capabilities.

responsive-jquery-plugins-27

Animated Responsive Image Grid

A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.

responsive-jquery-plugins-28

refineslide

RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations).

responsive-jquery-plugins-29

Responsive IFrames

Turn Your Complex IFrames into Responsive Goodness NPR-style.

responsive-jquery-plugins-30

Breakpoints.js

Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.

responsive-jquery-plugins-31

enquire.js

enquire.js is a lightweight, pure javascript framework for programmatically responding to CSS media queries.

responsive-jquery-plugins-32

Glisse.js

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

responsive-jquery-plugins-33

Responsive Tables

Don’t let tables break your responsive layout anymore. This simple JS/CSS combo will let your tables adapt to small device screens without everything going to hell.

responsive-jquery-plugins-34

syze

syze is a library for JavaScript that lets you easily target your designs by device or browser sizes. syze makes designing for desktops, televisions, tablets, and mobile devices simultaneously as easy as CSS. syze works before page load so there is no flicker. Size can update on window resize and orientation change – it works cross-browser, cross-device, cross-library and is less than 1KB.

responsive-jquery-plugins-35

Last Updated on   \   Tags: ,