.. Your Daily Design Dosis

10 Free and Responsive jQuery Slide/Gallery Plugins

| 1 Comment

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.

Source

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.

Source

FlexSlider

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.

Source

Photo Swipe

PhotoSwipe is an HTML/CSS/JavaScript-based image gallery specifically targeting mobile and touch devices. All modern mobile and touch devices, as well as the desktops and laptops, are supported. PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

Source

Elastislide

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.

Source

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..

Source

ResponsiveSlides.js

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.

Source

Blueberry

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.

Source

wmuSlider

A jQuery responsive slider with touch support and AJAX image gallery. If you are using Modernizr, you can enable automatic touch support by setting the touch parameter. The slider can be customised with some Javascript options, it should be pretty self-explanatory.

Source

Elastic Image Slideshow with Thumbnail Preview

A simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. To make this slideshow responsive, a mixture of JavaScript and CSS techniques is used.

Source

- § -

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.

 

Author: Gonzo the Great

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

1 comment

on this article: “10 Free and Responsive jQuery Slide/Gallery Plugins”
top