18 [Free] Open Source Responsive Image / Content Sliders

Image sliders are one of the most common components of modern web design. Go to any popular e-commerce website and you are most likely to find a carousel displaying latest products and offerings.

Image sliders are often used to present a large amount of information in a limited space. They can be used to catch the attention of website visitors, display important information or sometimes just to add colorful imagery to the design layout. Carousels can be catchy as well as distracting – but that is another debate. As an advocate of usability and simplicity of the design, we believe that image sliders, when used correctly, can be used as a means to present information effectively. And fortunately, there are plenty of free and open source image sliders that you can integrate into your web design effectively. Here is a list of 18 responsive image sliders for free use.

Full-Screen Responsive jQuery Image and Content Slider – RSlider

RSlider is a full-screen responsive image and content slider powered by the fantastic javascript library jQuery. With a nice and simple design, it adjusted automatically to the width of your browser screen.

FerroSlider – Responsive and Customizable jQuery Sliding Plugin

FerroSlider is a free, simple, powerful, responsive and customizable jQuery sliding plugin powered by HTML5 and CSS3. Organize any type of content, such as images, text, pages, lists and so on. You can use it as a sliding gallery or a slider for a one-page-website.

Items can be browsed with the help of navigation buttons, keyboard or an auto-slideshow feature. There are built-in animations offered for the transitions: fade and slide. And, it is possible to define the slide + duration speeds.

Flexslider – Fully Responsive jQuery Image/Content Slider Toolkit

FlexSlider is a lightweight (4kb minified) jQuery content slider plugin that is fully responsive, works great in any resolution and adapts itself nicely. It uses unordered lists, any HTML content can be placed inside each <li> and they will be converted into slides.

PhotoSwipe – Image Gallery for Mobile and Touch Devices

An interactive image gallery for mobile website with the look and feel of a native app. PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website. It works on iPhone, iPad, Android, Blackberry 6 and Desktop.

Responsive Image Carousel jQuery Plugin – Elastislide

Elastislide is a responsive jQuery image carousel that will adapt its size and its 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. This jQuery plugin can be laid out horizontally or vertically with a pre-defined minimum number of shown images.

Cool Responsive Slider with Swipe/Touch Support – SwipeJs

Swipe JS is a lightweight (3.7kb minified) mobile slider with 1:1 touch movement (sliding content based on exact touch position). Swipe is a standalone slider which doesn’t rely on any JavaScript library and has few configuration options

Supersized – Fullscreen Background Responsive Slideshow jQuery Plugin

Supersized is a jQuery plugin that automatically resizes (background) images to the size of the browser while maintaining image dimension ratio and runs them as a slideshow. There is no extra whitespace, no scrollbars – the entire browser window is always filled. It is lightweight and plays nice with Firefox, Safari, Opera, IE7, and IE6.

jQuery Slideshow Plugin – Camera

The developer of Diapo has created a fresh plugin named Camera which has more features and works very well with responsive layouts. Slides can be created with any HTML elements (images, text, videos, etc.) and Camera displays them with a good looking interface + a set of transitions.

Items can be browsed with prev-next buttons or bullet navigation, a play/pause option exists and a loader informs the user about the timing of the next slide. The plugin can be skinned via CSS and there are already multiple skins provided. It has options for almost everything, all aspects of the interface + functionality can be customized and callbacks exist on every level.

Responsive WordPress Slideshow Plugin – Camera WordPress

The developer of Diapo has created a fresh plugin named Camera which has more features and works very well with responsive layouts. Slides can be created with any HTML elements (images, text, videos, etc.) and Camera displays them with a good looking interface + a set of transitions.

Items can be browsed with prev-next buttons or bullet navigation, a play/pause option exists and a loader informs the user about the timing of the next slide. The plugin can be skinned via CSS and there are already multiple skins provided. It has options for almost everything, all aspects of the interface + functionality can be customized and callbacks exist on every level.

Responsive Image Gallery with Thumbnail Carousel

A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, this implements a responsive gallery that adapts to the viewport width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.

 Simple & Lightweight Responsive Slider Plugin – ResponsiveSlides

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft’s Build 2012 and Gridset App. ResponsiveSLides.js 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. The only dependency is jQuery (1.6 and up supported) and that all the images are the same size.

The biggest difference to other responsive slider plugins is the file size (1.4kb minified and gzipped) + that this one doesn’t try to do everything. Responsive Slides has basically only two different modes: Either it just automatically fades the images, or operates as a responsive image container with pagination and/or navigation to fade between slides.

A jQuery Responsive Slider – wmuSlider

A jQuery responsive slider with touch support and AJAX image gallery.

jQuery 3D Slider Plugin – RefineSlide

RefineSlide is a 3D transform/CSS transition-enabled jQuery plugin for displaying responsive, image-based content with shiny animations.

Responsive Content Slider – Liquid Slider

Traditional animations are not always as smooth as you’d want them to be, specifically on some mobile devices. The Liquid Slider uses those fancy hardware-accelerated CSS3 transitions with jQuery animations as a fallback. Installation is ridiculously easy and the API makes keeps it that way. Oh, and with custom builds, you only get the code you actually need. What more could you want? To prove it to you, here is a video showing you just how easy it is.

You can use any Html content you want. Any. The navigation will build itself around your content and the slider will adapt to the width of the screen. Make sure you have an understanding of media queries and other responsive design concepts.

Image Slideshow with Thumbnail Preview – Elastic

This tutorial shows how to create 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, it uses a mixture of JavaScript and CSS techniques.

jQuery Responsive Thumbnail Gallery Plugin – ResponsiveThumbnailGallery

jQuery Plugin for creating image galleries that scale to fit their container. It’s very easy to use, link to the script after jQuery. Apply it to a DOM element on the document ready event.

JavaScript Image Gallery Framework – Galleria

Galleria is a JavaScript image gallery framework that simplifies the process of creating beautiful image galleries for the web and mobile devices. Pull galleries, sets, and movies from several sources into a Galleria gallery with just a few lines of code. Galleria supports swipe movements and uses hardware optimized animations for ultra-smooth image browsing on mobile and touch devices. Galleria is prepared for responsive environments and reacts to dynamic measures and media queries using simple options.

Open Source jQuery Image Slider – Blueberry

With the popularity of smartphones and tablet devices responsive/fluid web layouts have become an important part of modern web design. Blueberry is an opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

If you would like to receive our new plugins, responsive templates, free PSDs and keep up to date with the latest and greatest articles and resources from the design/developer community, you can subscribe to our Full RSS Feed, follow us on Twitter and Facebook.