When implementing responsive web design, all design components will need to adapt to the device (from mobile browsers to netbooks and tablets) on which they are displayed and have to interact with, therefore it’s important to not only take care of the visual part of a website but also of the functionality.
We all know how popular image and content jQuery sliders are, and for a good reason. jQuery plugins are very useful for web designers and developers to add amazing effects and (extra) functionality to websites and/or apps.
Responsive Website Design is the hottest thing in the web design market as we speak. If you have ever tried to make a existing jQuery Slide Plugin responsive (like I did with a modification of the Nivo Slider for designforgood.eu), then you know how great it is to have some scripts and plugins that you can integrate into your next responsive site.
In this post you will find the best and free Responsive jQuery Plugins for adding a responsive slider or gallery to your website design, .. so, let’s hit the road, Jack.
Glisse.js – Responsive and fully customizable jQuery Gallery
A simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3. It has keyboard navigation and is fully CSS customizable, uses a lot of new CSS3 features like keyframes, has 7 different transition effects, scales to the viewport and is iPad & iPhone ready.
jQuery Responsive Thumbnail Gallery
The plugin allows us to define each image in 2 different sizes, just set a breakpoint width and it decides which image to display according to the size of the screen. jQuery Plugin for creating image galleries that scale to fit their container.
FlexSlider is an awesome, fully responsive jQuery slider plugin. It has a simple and semantic markup, supported in all major browsers, comes with various slide and fade animations, multiple slider support, callback API and hardware accelerated touch swipe support and you can use any HTML elements in the slides.
Elastislide is a responsive jQuery image carousel that will adapt its size and behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid. Elastislide uses the jQuery Touchwipe Plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.
Responsive Image Gallery with Thumbnail Carousel
This plugin will help you create a responsive image gallery with an option to show or hide thumbnails. A jQuery image gallery with a thumbnail carousel. There is also keyboard navigation and it also uses jQuery Touchwipe Plugin to make it possible to navigate the images by “wiping” on the iPhone and iPad..
This is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It works with wide range of browsers including all IE versions. It automatically fades the images, or operates as a responsive image container with pagination to navigate/fade between slides.
Introducing a jQuery image slider written specifically for responsive web design. Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
Elastic Image Slideshow with Thumbnail Preview
- § -
Next Part of this Responsive jQuery Plugins Series I will be showing you some tools to dynamically arrange code blocks based on breakpoints, grid generators, responsive navigation menu’s, etc.