100 jQuery Sliders for Images/Content (Part 1)

Sam Deering
Tweet

It seems image and content sliders are getting more and more popular amongst most websites these days. So how do you find a decent one that will be suitable for your webiste? Well, we have collected 100 jQuery image and content sliders & plugins for you to check out. Below is the first part (plugins 1-50) of our huge collection of jQuery sliders for your images and content! Watch out for the second part! Enjoy!

Related Posts:

1. RoyalSlider

RoyalSlider for WordPress is a cross-device jQuery content slider with touch-based navigation and fluid layout. It has user-friendly admin area where you can manage slides, change slider settings, customize interface and add blocks-captions using custom WYSIWIG editor.


RoyalSlider

Source Demo

2. Estro – jQuery WordPress Slider

“Estro” meaning “creativity”, “talent” or “inspiration”, in Italian, is a fitting moniker for this beautiful slider. For the design of this slider we wanted to create a price of work which could form the centerpiece of your next web project.


Estro

Source Demo

3. Slider Evolution for WordPress

Slider Evolution is a jQuery plugin that lets you easily create powerful JavaScript sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!


Slider Evolution

Source Demo

4. liJQuery Image Slider

Is a jQuery plugin for WordPress carefully crafted slider/banner image rotator, full of features, easy to install and customize. It comes with intuitive – user friendly WordPress admin interface.


liJQuery

Source Demo

5. CCSlider – jQuery 3d Slideshow Plugin

CCSlider is a unique jQuery slideshow plugin. It supports 3d transitions! There are 14 stunning 3d transitions available, and also 16 stylish 2d transitions. You have the option for mentioning a 2d transition fallback for old browsers that don’t support HTML5 Canvas, which is used for producing the 3d transitions.


CCSlider

Source Demo

6. uBillboard – Premium Slider for WordPress

It is a jQuery based slider with a multitude of transitions and options for you to be able to customize it to your needs while not overwhelming you with options you never wanted or needed. Version 3 is a revolutionary release with most of the codebase rewritten from scratch.


uBillboard

Source Demo

7. Content Slider with jQuery

In this tutorial you will learn how to build a content slider with the use of jQuery only. You will be able to use the final result for commercial and personal projects also.


Content Slider with jQuery

Source Demo

8. Interactive Filterable Portfolio

This great jQuery gallery plugin will help you create an interactive filterable portfolio.


Interactive Filterable

Source Demo

9. Polaroid Photo Viewer

This jQuery plugin will help you add some awesome looking Polaroid effect to your photos.


Polaroid Photo Viewer

Source Demo

10. Sliding Boxes and Captions

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my CSS) that essentially acts as a window where two other items of your choosing “peek” through.


Sliding Boxes and Captions

Source + Demo

11. Moving Boxes

Moving boxes is another great slider powered by the jQuery JavaScript library.


Moving Boxes

Source Demo

12. jQuery Panel Gallery

With this plugin you can choose the direction in which the transition occurs from left to right, right to left, top to bottom, or bottom to top.


jQuery Panel Gallery

Source + Demo

13. Sliding Gallery

This plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through.


Sliding Gallery

Source Demo

14. Fancybox

It is a tool for displaying images, HTML content and multi-media in a Mac-style “lightbox” that floats overtop of the web page.


Fancybox

Source + Demo

15. Smooth Div Scroll

It is a jQuery plugin that scrolls content horizontally left or right. Setting it apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps.


Smooth Div Scroll

Source + Demo

16. Slides

Is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.


Slides

Source Demo

17. Fullscreenr

So you want to have a background image on your website, which always fills the screen and maintains its aspect ratio? And it has to be centered, instead of focussing at the top left corner of the image? This plugin does that.


Fullscreenr

Source Demo

18. Slidy

jQuery Slidy is a plugin that generates a customizable transitions automatically.


Slidy

Source + Demo

19. jQuery Easy Slides

Easy Slides is an extremely easy to use plugin for making slideshows. It also has the advantage of being fairly light weight, with both JavaScript and CSS weighing in at just under 2.1kb.


jQuery Easy Slides

Source + Demo

20. MobilySelect

Is a jQuery plugin (2kB) that replaces one collection of items with another.


MobilySelect

Source + Demo

21. Pikachoose

Is a lightweight jQuery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.


Pikachoose

Source + Demo

22. AviaSlider

Is a jQuery slideshow plugin with unique transition effects.


AviaSlider

Source + Demo

23. unoslider

Is a fully responsive, touch enabled, mobile optimized jQuery slider plugin.


unoslider

Source + Demo

24. Blueberry

Is an experimental open source jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.


Blueberry

Source + Demo

25. wmuSlider

A jQuery responsive slider.


wmuSlider

Source Demo

26. jQuery Responsive Thumbnail Gallery Plugin

jQuery Plugin for creating image galleries that scale to fit their container.


Responsive Thumbnail Gallery Plugin

Source + Demo

27. EasyRotator – Free jQuery Slider / Rotator Builder

Allows you to build impressive jQuery sliders / rotators for your webpages in minutes. Available as both a Dreamweaver extension and standalone application, it lets you select photos, choose a layout, make customizations, then have all necessary code automatically added to your page.


EasyRotator

Source + Demo

28. Supersized – Full Screen Background/Slideshow jQuery Plugin

Features:
> Resizes images to fill browser while maintaining image dimension ratio
> No extra whitespace, no scrollbars – the entire browser window is always filled
> Compatible in Firefox, Safari, Opera, IE7, and IE6
> Ability to cycle through images/backgrounds via slideshow


Supersized

Source Demo

29. jQuery Infinite Carousel

With jQuery for Designer’s redesign I decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page. This tutorial will walk through the fundamentals of the effect and how to recreate it.


jQuery Infinite Carousel

Source + Demo

30. Nivo Slider

The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. Completely free and totally open source, there literally is no better way to make your website look totally stunning.


Nivo Slider

Source + Demo

31. Coda Slider Effect

Although Panic didn’t really invent the effect, the sliding panels on the Coda is great implementation of this effect. This article will pick apart the pieces required to create the effect, and how to better it.


Coda Slider Effect

Source + Demo

32. Creating a Slick Auto-Playing Featured Content Slider

Learn how to create a slick auto-playing featured content in this tutorial.


Slick Auto-Playing Featured Content Slider

Source Demo

33. jCarousel Lite

Is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super lightweight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.


jCarousel Lite

Source + Demo

34. Popeye

Generates an inline image gallery from an unordered list of images. The gallery features clever inline image enlargement, i.e. the enlarged image stretches out over the site content without adding a visual overlay of the whole site.


Popeye

Source Demo

35. Simple Controls Image Gallery

Rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery.


Simple Controls Image Gallery

Source + Demo

36. flickrGallery – Dynamic Flickr Photo Gallery with Slider

Is an open-source photo gallery for jQuery that allows you to dynamically pull images from a photoset in Flickr.


flickrGallery

Source Demo

37. S3 Slider – jQuery Image Gallery

To use it, include the jQuery library, s3Slider JavaScript and CSS file. Info layer about the images in the slideshow can be displayed at left, right, bottom or top. You can also set duration between slides when initializing s3Slider.


S3 Slider

Source Demo

38. Easy Slider 1.5 – The Easiest jQuery Plugin for Sliding Images and Content

This version features:
> Auto slide
> Continuous sliding
> “go to first” and “go to last” button
> hiding controls
> Optional wrapping markup for control buttons
> Vertical sliding
> Multiple sliders on one page


Easy Slider 1.5

Source Demo

39. Gallerific

Is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.


Gallerific

Source Demo

40. jQuery lightBox

Is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.


jQuery lightBox

Source + Demo

41. Gallery View

Is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. Visit the project home page for documentation and demonstrations.


Gallery View

Source + Demo

42. TN3 Gallery

Is a jQuery image gallery with slideshow, transitions effects, multiple album options, CSS skinning and much more. It’s compatible with all modern desktop and mobile browsers.


TN3 Gallery

Source + Demo

43. Galleria

Is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.


Galleria

Source + Demo

44. Fancy Image Gallery with jQuery

Create stunning tooltips and galleries with the help of JavaScript.


Fancy Image Gallery

Source Demo

45. Create Beautiful jQuery Slider

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.


Beautiful jQuery Slider

Source + Demo

46. Sliding Boxes and Captions with jQuery

All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.


Sliding Boxes and Captions

Source Demo

47. Building a jQuery Image Scroller

In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time.


jQuery Image Scroller

Source Demo

48. Slider Gallery

A tutorial explaining how to create a similar effect used to showcase the products on the Apple web site.


Slider Gallery

Source + Demo

49. Simple jQuery Image Slideshow with Semi Transparent Caption

Image Slide Show is one of the famous components in web design and development. A lot of the websites display news headlines in an image slide show to attract viewers attention, of course, with caption/excerpt. No doubt about it, this is a clever method not only to gain attentions, but it also makes the website more alive (not too static, dull).


jQuery Image Slideshow with Semi Transparent Caption

Source Demo

50. Create a Slick and Accessible Slideshow Using jQuery

Learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.


Slick and Accessible Slideshow Using jQuery

Source Demo

Free JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja and receive updates on exclusive offers from SitePoint.