Best jQuery Responsive Plugins & Tutorials with Demo

    Excolo Slider : A Simple jQuery Sliding Plugin

    Excolo Slider : A Simple jQuery Sliding Plugin

    A simple jquery sliding plugin, supporting responsive design, keyboard and touch navigation.

    Features:

    • AutoPlay Slideshow
    • Keyboard slide navigation
    • Mouse slide navigation
    • Prev/next button navigation
    • Repeat when last slide is reached
    • Play the slideshow backwards
    • Auto adjust size initially and on browser resize, for responsive designs
    • Touch enabled (limited to a few browsers)

    jQuery Easy Responsive Tabs to Accordion

    jQuery Easy Responsive Tabs to Accordion

    Easy responsive tabs – is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

    Features:

    • Horizontal / Vertical Tabs to Accordion
    • Tabs and accordion are created entirely with jQuery
    • Supports multiple sets of tabs on same page
    • Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
    • Multi device support (Web, Tablets & Mobile)

    iMapper : jQuery/HTML5/CSS3 Image Mapper

    iMapper : jQuery/HTML5/CSS3 Image Mapper

    iMapper – jQuery/HTML5/CSS3 Image Mapper is a simple, yet powerful plugin that lets you select an image of your choice and pin stuff on it. It offers several embedded pins which offer special functionality, as well as the ability to import your own pins with the basic functionality. It is very intuitive and easy to use, and it will take but moments to set up your image with pins and customize the content connected to each of these pins.

    iMapper is a perfect solution if you want to make your contact page a bit more dynamic. It will fit perfectly no matter what your profession is. It can easily be adapted to a health image mapper, product image mapper, contact image mapper etc.

    Blades 3D : CSS3 Responsive & Retina Ready Banner Rotator

    Blades 3D : CSS3 Responsive & Retina Ready Banner Rotator

    Blades 3D is a responsive and retina ready with CSS3 3D Transforms and CSS3 Transitions.

    Features:

    • Responsive (optional)
    • Retina Ready (optional)
    • Choose to use autoplay and set autoplay delay
    • Automatically randomize the slide order
    • Choose to turn off 3D flip beaviour and switch to “classic” mode
    • Choose from one of 6 different flip rotations or cycle through them all
    • Set “break-apart” thumb spacing
    • Set the number of grid columns and rows
    • Touch-swipe for mobile devices
    • Use as many slogans that will fit
    • Slogans support multiple lines and hyperlinks
    • Use more than one banner on the same page
    • jQuery free (no worrying about jQuery conflicts or having to update to the latest jQuery)
    • Custom settings can be passed through either JavaScript or HTML attributes.

    Swipebox : A touchable jQuery lightbox

    Swipebox : A touchable jQuery lightbox

    Swipebox is a jQuery “lightbox” plugin for desktop, mobile and tablet.

    Features:

    • Swipe gestures for mobile
    • Keyboard Navigation for desktop
    • CSS transitions with jQuery fallback
    • Retina support for UI icons
    • Easy CSS customization

    offCanvasMenu : jQuery Responsive off-canvas toggling Menu

    offCanvasMenu : jQuery Responsive off-canvas toggling Menu

    offCanvasMenu is a jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.

    When activated, offCanvasMenu “slides” the menu element into view, “pushing” other content to the side.

    IcoRoll : jQuery Scroll Navigation System

    IcoRoll : jQuery Scroll Navigation System

    Responsive scroll menu system providing ideal solution for vertical navigation on pc and mobile devices.It connects html id attribute on page with menu, so menu knows where user is on page.

    Features:

    • Responsive
    • Uses touch, mouse and mouse wheel events
    • Easy configuration
    • Easy theme change ( one commented css file )
    • Works on almost all browsers ( only not on IE6 )
    • Supports touch slide effect
    • Is integrated with icomoon icons ( 3800 free and open source icons)
    • Has additional feature – text tooltips to redirect user to different section of page

    BlueprintUI: jQuery Responsive Modal with CSS3

    BlueprintUI: jQuery Responsive Modal with CSS3

    BlueprintUI Responsive Modal is a super simple fully featured jQuery modal plugin with more than 30 CSS3 powered animation possibilities and 7 home made themes to use it.

    Features:

    • Responsive Design – The layout adpats to the viewing environment.
    • CSS3 Animation – 31 funny and really smooth animations.
    • Themeable – 7 provided themes and simple api to create more.
    • 3D Scaling – If the browser support 3D, you can add a super smooth scaling effect to the overlay.
    • Extensive Documentation – The plugin is provided with an extensive documentation to help you use it

    Menufication : jQuery Responsive Fly-Out Menu with CSS3

    Menufication : jQuery Responsive Fly-Out Menu with CSS3

    Navigation is one of the most important aspects of a website. The fly-out menu (with inspiration from Facebook) has been proven to be the most efficient navigation that dramatically can improve your visitors experience on your website!

    Menufication is a user-friendly, customizable jQuery-plugin to transform your sites navigation to a responsive fly-out menu in Facebook fashion.

    Features:

    • Utilizes CSS3-tranforms for optimal and native-like performance.
    • Swipe to open/close the menu (iOS only in v1.0).
    • Option to only generate the menu on predefined browser sizes.
    • Option to only generate the menu on mobile devices.
    • Support for hierarchical menus.
    • Several options to customize the behaviour of the menu.
    • Only dependency is jQuery.

    jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets

    jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets

    A jQuery UI theme based on Twitter Bootstrap.This project was started to bring the beauty and ease-of-use of Twitter Bootstrap to jQuery UI widgets.In their original forms, jQuery UI and Bootstrap can’t coexist resulting in conflicts with both CSS classes and styles as well as JavaScript when you do try to use them. jQuery UI Bootstrap provides the JavaScript and CSS required to quickly start a project using both jQuery UI and Twitter Bootstrap.

    Our solution offers a custom version of Bootstrap compatible with jQuery UI as well as a Bootstrap-themed jQuery UI theme you can use to prototype your projects.