100 Best Free jQuery Image and Content Slider Plugins

When wanting to present photographic, video or written content in new and visually interesting ways, then a slider can often be a good choice. Sliders help to save space on the page by containing many different images, text and link information in a fixed space.

Not all sliders are built the same though. Some aim to be as small as possible (some as little as just 2KB) in order that they can load faster, while others want to add in as many bells and whistles as they possible can.

We have worked hard to find 100 of the best free jQuery image and content sliders which will run well on your non-blog sites. Several of the best sliders also have a WordPress compatible version too. We hope you enjoy our list and find it useful for your next development project.

Simple Multi Item Slider

A gorgeous looking and highly function slider. This displays four large product images and 4 categories below, with the current category pre-selected. Clicking on an image can bring up the respective product page. Clicking a different category prompt the slider to pull the product images off to the left, and then pull in 4 new products, one at a time at accelerating speeds. Very slick and perfect for an interactive online clothing store. The markup is then explained.
Demo | Source

 

Flexslider

FlexSlider from popular WooThemes provides a wealth of responsive sliders, carousels and video options. Attractive sliders like one with mini thumbnails at the bottom and a larger version up top. Touch swipe support for mobile devices and Windows 8. Frequently updated.
Demo | Source

 

Bubble Slideshow Effect with jQuery

An unusual bubble effect that displays a series of bubbles containing part of the image from the next slide, gradually revealing more bubbles until the next slide is completely revealed. Uses jQuery and CSS background properties to pull off the effect.
Demo | Source

 

Coding a Rotating Image Slideshow w/ CSS3 and jQuery

Here is a fully functional rotating image slideshow, with a complete instructional explaining step by step just how they pulled it off. Watch the postage stamp shaped image rotate 90 degrees and morph into a different slide once the rotation is complete.
Demo | Source

 

HTML5 Slideshow w/ Canvas & jQuery

Explore this HTML5 Slideshow that uses jQuery and the latest Canvas property to enable fade ins and fade outs, and slick slide moves. Impressive visuals, all broken down with each part of the code explained.
Demo | Source

 

Making a Mosaic Slideshow With jQuery & CSS

With this slideshow, the developers were looking for something a bit different. They came up with a mosaic transitional slider effect. The main slider image displays within a square grid, and tiles within this grid gradually change when a new slide starts to be shown. It is all explained in a tutorial from TutorialZine.
Demo | Source

 

Apple-style Slideshow Gallery With CSS & jQuery

The carousel is a an Apple inspired slideshow gallery which displays high quality images from a product line, with smaller versions of each shown below, which can be selected. Slides move right to left quickly, and if a selected slide is several slides deeper, then slides rapidly slide across until the selected slide can be displayed. Reminiscent of the Apple web site and fully explained in a tutorial too.
Demo | Source

 

Responsive Image Gallery with Thumbnail Carousel

A responsive gallery with a twist. A choice of whether to display a carousel of image sliders or not, and a responsive viewport for the image which adjusts to the size of your display screen. A loading rotating clock ticker displays as the new slide is loaded and then overlayed over the previous one. Code is explained below the slider demo.
Demo | Source

 

Full Width Image Slider

An extremely fluid slider that will adjust to the size of the viewport. Contained within a iPad frame are slide images, which zoom off left or right when navigated. Very flexible with a variety of optional setups. Code explained below in the separate link.
Demo | Source

 

Elastic Content Slider

An elastic slider that fits the size of the viewing window. Boxed slider, with graphical tabs below the slide. The slider itself can include scroll bars on the right side if the containing content is ultimately too larger for the slide window. Code is fully explained.
Demo | Source

 

Fullscreen Slit Slider

A totally beautiful full screen that uses every pixel to display colorful slides. Each slide includes functional navigation buttons at the bottom, gray navigational arrows on each side, a famous quote and a graphic at the top that slides across independent of the other elements when the slide is changed. Code is fully explained.
Demo | Source

 

Swift Content Navigation

This slider displays an image & a caption and when the navigation is clicked, the image with turn into a ghost-like image with high opacity and fly off in a random direction until it is off the screen, revealing the next slide in the center. Quite original and unusual. The source code is then minimally explained.
Demo | Source

 

Vertical Showcase Slider

This slide is targeting a slick shopping experience using initially two product images and a main image above, with product information shown over on the left side. Selecting an alternate image will push the main image upwards out of the frame and the next image with push upwards to replace it. The information panel on the left will also push downwards. Therefore, you have two directions of movement when a slide is changed. Click the product images from the carousel will cause them to rotate through several more products in the collection, so it would be possible to show an entire spring/summer or autumn/winter collection this way. The markup is fully explained.
Demo | Source

 

Triple Panel Image Slider

The triple panel image slider is really something else. It is like a three sided greeting card standing up. There is the main center image, and two off to an angle on either side with a 3D effect. The center image has a title and a caption with it. Using the bottom navigation, each section of the triple panel will experience another image sliding across until the old image is erased. Mousing over either side of the card will cause it to raise or fall slighly too. All full explained in the accompanying tutorial.
Demo | Source

 

Parallax Content Slider

This is a more traditional parallax content slider where the title zooms off on its own, rapidly followed by the rest of the slide. There are several modes including the default, auto-play (which automatically changes the slides for you) and a no parallax effect mode. Code fully explained.
Demo | Source

 

Elastic Image Slideshow

The Elastic Image Slideshow is a little different. Thin black bars line up horizontally below the slideshow can be clicked to change the slide. With slides that have a two word title, each word arrives separately as the slide image changes. Quite unusual appearance with full screen. All fully covered in the tutorial.
Demo | Source

 

Rotating Image Slider

Here is a fashion slider with a difference. Four separately angled fashion images. Navigating left or right will cause each of the four images to slide out of view, and another set of four images will display in their place. The demo needs full screen and a high resolution to get the full effect. The tutorial explains just how they did it.
Demo | Source

 

3D Wall Gallery

Here is a thumbnail preview slider featuring a long series of model images from left to right. Something akin to a volume slider sits at the top of this full screen slider and can be dragged across, which pulls the images further along in the slideshow. Alternatively, more traditional buttons at the bottom can navigation a particular slide if you know where it is in the order. Captions and links can be added to individual slides too. The Safari web browser will show the coming images in a 3D perspective, but other browsers like Firefox just show the images normally and retains the remainder of the functionality. Images are used to explain how they pulled this one off.
Demo | Source

 

Thumbnails Preview Gallery

The Thumbnails Preview Gallery is a curious one. The demo shows several different types of option including images that zoom in gradually, images that slide across when viewing the image frame and other choices. All navigated via buttons at the bottom. Difficult to see how one would use this on a functional site though as it’s not all that self explanatory for the site visitor. Tutorial explains all.
Demo | Source

 

zAccordion

This is a horizontal accordion slider that displays several images in a single frame, which slightly overlap each other. When clicking an image that is only partly revealed on the right side of the frame, this will then slide out to display more fully. Captions can also be included with a good amount of information for each and there are transition animations too. An interesting alternative to the usual slider. Implementation is explained, along with download options.
Demo | Source

 

Parallax Slider With jQuery

This parallax slide effect is very pretty. A colorful background, with old style photos contained in unique frames. When hovering over a photo, it rises up noticeably. Clicking on it will cause the slider to slide across until it reaches that slide. The markup is explained and source code is provided.
Demo | Source

 

Portfolio Zoom Slider

This one is sweet. A tiny slider is integrated on the page and fully functional. It can also be clicked on to display a pop-up using the Fancybox plugin and the Cloud Zoom plugin is used her too. The images within the slider can then be quickly navigated through in the larger form. Code deals with potential jQuery code conflicts with other plugins and this is discussed and resolved.
Demo | Source

 

Animated Portfolio Gallery

This full screen unique approach to a gallery has a series of page thumbnails in a scroller on the left side and clicking one will change the rest of the screen real estate to display that slide. Each image includes a separate title and project description, and the image within the slide can be clicked on to get a closer view inside a pop-up. Code explained separately.
Demo | Source

 

Tiny Circle Slider

This is a wide circle slider where you click on the red dot and then drag it left or right around the circle. As you do so, the image also slides and changes to a series of images contained inside the circular slider.
Demo | Source

 

Slider Gallery With jQuery

This is ideal for displaying several fashion shows. You select one of the fashion shows and a series of photos are displayed. Clicking on one of those can bring up a larger version. It’s then possible to navigate through the entire show photo by photo using the pop-up.
Demo | Source

 

Photostack Gallery with jQuery and CSS3

Here a series of tabs showing images and information. When clicking one, a photo is displayed in an attractive frame. By clicking the arrow at the center of the photo will cause the photo to slide behind and reveal the photo behind it in a stack of photos shown.
Demo | Source

 

Simple Content Slider

A content slider that shows sliding out tabs on the right side that can be clicked on. This changes the slide that displays. Each slide can have information added and a link to further information.
Demo | Source

 

AD Gallery – a jQuery gallery plugin

This gallery has a carousel at the bottom with it’s own navigational elements. The slideshow itself can be started and stopped from running on automatic. Each image shown can have a title and a description underneath.
Demo | Source

 

Pikachoose

With simple two line captions and multiple larger thumbnails that when clicked on will swap out the main slide, this simple slider does the trick.
Demo | Source

 

Galleria

Galleria is a well developed slider with many different options. Responsive, able to pull image and video galleries in from Flickr, Picasa, YouTube and more. Mobile support. Able to run full screen automatically, with simple captions at the very bottom. This is a minimalist slider that’s not lacking in features.
Demo | Source

 

s3Slider

S3Slider is a subtle slider with a greater focus on the layer that can slide up from the bottom, on the left or right side, or both, to display relevant information to the site visitor.
Demo | Source

 

jQuery Popeye

The jQuery Popeye slider is different than others. It tends to be much smaller, with more emphasis placed on the captions near the image rather than overlaying the image. Controls on or near the image can control the direction of the slider, sometimes offering an automatic flow option.
Demo | Source

 

Easy Slider

The Easy Slider is a robust slider that has prominent navigation on either side and is capable to pushing slides around with ease. There are several versions of this slider as it has been upgraded over time.
Demo | Source

 

Galleriffic

A gallery plugin with several rows of dulled images on the left side and a main gallery image on the right. Clicking on any of the thumbnails will change the main image accordingly.
Demo | Source

 

Beautiful jQuery slider tutorial

A simple widescreen image slider that lacks left/right navigation and instead uses numbered buttons to click and change the slide. Very simplistic, yet still effective.
Demo | Source

 

slideViewer

A simple slide viewer built from one ordered list. The ordered list is shown plainly as a horizontal navigation in the bottom left corner right below the image. Sliders push across smoothly.
Demo | Source

 

jFlow

NetTuts offers here their simple large slider with colorful arrow navigation elements. Simple implementation and background explanation provided.
Demo | Source

 

Image Flow

Unusual image flow that works much like the album covers do on iTunes, spinning around as you move the mouse wheel around. A center-positioned bar can be moved across and the images twirl around as if on a carousel.
Demo | Source

 

Space Gallery

Here and image gallery looks a little like a space effect. One photo at the front, and the shadows of other photos behind that. When clicking on a photo shadow behind, the current photo moves off and the next one on the list (not the one clicked) is displayed. Simple yet effective.
Demo | Source

 

Slick and Accessible Slideshow Using jQuery

The Slick Slideshow is a nice border with a slide and textual information provided adjacent to it. Navigation arrows allow users to scroll through the slides. Clean and simple.
Demo | Source

 

Sliding Image Gallery jQuery Plugin

The sliding image gallery shows three images side by side. The ones to the left and right of the center image are smaller. Clicking on the center image will zoom into it, but not create a pop-up. Clicking on one of the smaller outer images will rotate the gallery around.
Demo | Source

 

Simple Controls Gallery

This is an attractive alternative to a pop-up. It shows an image. When hovering over it, the title of the image shows at the top, and a navigation element shows at the bottom. With the navigation, you can move left, right or choose to start/stop the automatic slideshow.
Demo | Source

 

Smooth Div Scroll

This slider uses very large navigation buttons and combines the slider with the ColorBox plugin for attractive image pop-ups.
Demo | Source

 

Supersized

SuperSized is not a McDonald’s meal, but instead a full screen slider with navigation buttons on the bottom and automatic slideshow options too. Image credits can be shown. A hidden carousel reveals with a button press to provide the extra option to click on individual slides to view them.
Demo | Source

 

EoGallery

Another gallery animation that shows three images and lets you navigate around. This one is extremely basic in appearance. Could really do with someone skills in graphic design to give it a new look, but it functions fine.
Demo | Source

 

jCarousel Lite

A crude but effective slider contained in basic border framing. Lacks a pop-up and other fancy features though.
Demo | Source

 

Building a jQuery Image Scroller

Learn how to build a jQuery Image scroller from Tuts.
Demo | Source

 

Easy Gallery

Easy Gallery is a very simple slider that automatically moves from one slide to the next. There is a small animation where the slide first moves a little to the right, before moving completely out of the left frame, and another slides moves across to replace it.
Demo | Source

 

Timelinr

A cute time-line with dates across the top, which rotate gradually as each slide is revealed. Useful for company history time-lines and such like.
Demo | Source

 

Raccordion

A horizontal accordion that is very wide, with thick slices of the other slides hidden behind which when clicked slider across in an attractive manner. A caption and description sits below each slide.
Demo | Source