40+ Fresh jQuery Image and Content Sliders Plugins

Posted in Photo Effects, Tutorials • Posted on 15 Comments

In this round-up, you will find the best of the freshest jQuery Image and Content Sliders Plugins so that you can take advantage of them and produce startling image and content sliders. You may find it quite difficult to figure out which plugin is best for you because all these plugins have different functionalities.

Keeping this in mind, we compiled this post. Let’s have a closer look and enjoy the power of visual presentation! Sliders are one of the best ways how to show of feature list, benefits, images say more than thousand words!

Oh, before we start with the list, look at this amazing example how these sliders can be used creatively. This is one of the best examples how to use power of the slideshows, even when slider is not the main element in page. Let your creative and functional ideas flowing!

FlatPack

FlatPack has an unusual, yet awesome solution. They’re using a slider in their Testimonials area to show what people are saying about the prouct. When text & images slide from bottom to top they attract your attention, yet they dont take too much space. Check their site for inspiration!

Preview

Of course, there are many various solutions in the list as well. Implementing large backgrounds, zooming images, optimizing them for retina displays, responsive/mobile friendly, using videos in your galleries – you’ll find it all below.

Slider Revolution

Slider Revolution

Slider Revolution is a responsive (mobile friendly) or full-width slider with must-see effects which can still keep or build your SEO optimisation (all content always readable for search engines). See the heaps of custom
transitions/animations for each object on the page! Customize this slider with the convenient drag & drop backend to your very needs.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy-to-set options to create your own effects. It’s a premium plugin, but I will tell you that you worth the penny you spend.

Few other important benefits to Slider Revolution:

  • Image and thumbs fully resizable
  • Use CSS Animation with FallBack to jQuery
  • Unlimited Caption Layers
  • Captions like video, image and HTML tags can be easily created
  • Unlimited slides
  • iPhone & Android swipe touch enabled
  • jQuery conflict-free plugin
  • Customizable 100% via plugin backend
  • Easy installation in your website

Worried about coding skills? Slider Revolution had a Video Support which is easy to follow. No advance coding skills required, easy as cooking bacon. Ah..but what am I saying? Just check for yourself – Kenburner Responsive jQuery Slider has pretty good feature rundown and live examples.

1. FlexSlider

( Demo | Download )

FlexSlider is an amazing, totally responsive jQuery slider plugin. It bears uncomplicated, semantic markup, slide and fade animations, and is supported in all major browsers, therefore you won’t have any compatibility issues. Flexslider is built for novices and pros in a similar way.

FlexSlider

2. Bubble Slideshow Effect with jQuery

( Demo | Download )

In this tutorial we will be building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as an interesting slideshow, and as the code will be completely modular, you will be able to easily use and modify it.

Bubble Slideshow Effect with jQuery

3. Responsive Image Gallery with Thumbnail Carousel

( Demo | Download )

With this plugin, you can create a responsive image gallery with a thumbnail carousel using Elastislide. The gallery will have a view switch that allows people to view it with or without the thumbnail carousel. We’ll also add the possibility to navigate with the keyboard.

Responsive Image Gallery with Thumbnail Carousel

4. Circular Content Carousel with jQuery

( Demo | Download )

With this circular content carousel, you can have some content boxes that can slide substantially (circular). Clicking the “More” link will move the respective item to the left and slide out the content area, so that you can navigate through the carousel where every step will disclose the next or previous content box with its extended content.

Circular Content Carousel with jQuery

5. Lateral On-Scroll Sliding with jQuery

( Demo | Download )

In this tutorial we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport.

Lateral On-Scroll Sliding with jQuery

6. Scrollbar Visibility with jScrollPane

( Demo | Download )

Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. In this tutorial we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.

Scrollbar Visibility with jScrollPane

7. Timelinr

( Demo | Download )

This simple jQuery plugin will assist you in providing more life to otherwise your lifeless timelines. With this plugin, you can easily parameterize the majority of attributes: speed, transparency, etc. It also supports horizontal and vertical layouts.

Timelinr

8. SmartGallery

( Demo | Download )

SmartGallery is a lightweight, lightening up fast and completely customizable image gallery that has been exclusively designed to support huge data. SmartGallery comes with 12 different transition effects together with some inimitable transition effect and thumbnail navigation.

SmartGallery

9. Xml Driven Vertical News Scroller Script

( Demo | Download )

vScroller, demonstrates classified and color-code content, is an upright or vertical scroll. Feeds originate from regular XML file and styled with plain CSS3 for a fresh and good-looking interface.

Xml Driven Vertical News Scroller Script Using html and jQuery vScroller

10. jQuery Sliding Content Bar Plugin: PushUp Content

( Demo | Download )

This smart and fast content bar is easy to integrate in any web design or web based application. You can seamlessly integrate this in your website and it will pop up whenever needed. Apart from this, it is highly easy to customize this plugin. You can add your contact details, location map by means of Google Maps, and a plain contact form that visitors can use to contact with you.

jQuery Sliding Content Bar Plugin: PushUp Content

11. Skitter

( Demo | Download )

Skitter is a plugin for producing good-looking slideshows. You can modify every aspect of your slideshow.

11.1 Estro

( Demo | Download )

This a creative plugin that includes a smooth and powerful effects which is completely configurable and compatible with all major browsers and mobile platforms like iPhone and iPad.

Skitter

12. Diapo

( Demo | Download )

Diapo is a free-of-charge and open source jQuery slideshow plugin. Most interestingly, you can also use it in your projects and sell it as part of a bigger work (donations are not required, but asked to be considered in this case).

Diapo

13. Craftyslide

( Demo | Download )

Craftyslide is a small slideshow that is built on jQuery with the intention to be unique by furnishing a simple, no-frills process of displaying images packaged into a small, clean and competent plugin.

Craftyslide

14. Responsly.js

( Demo | Download )

Responsly.js is a band of simple responsive widgets, written by means of CSS3 transformations and accessible as a jQuery plugin.

Responsly.js

15. Elastislide

( Demo | Download )

This is another very responsive jQuery carrousel that will adjust its size and its performance so as to work on any screen size. Putting in the carousel’s structure into a container with a fluid width will make the carousel fluid as well.

Elastislide

16. Blueberry

( Demo | Download )

This one is an experimental open source jQuery image slider plugin that has been designed with the aim to work with fluid/responsive web layouts.

Blueberry

17. Slidorion

( Demo | Download )

Slidorion is an amalgamation of an image slider and an accordion and, therefore, it demonstrates attractive images together with a changeable length description. Slidorion is a great alternative to the traditional jQuery slider seeing that images are linked to each tab and accompanied by a large array of effects.

Slidorion

18. bxSlider

( Demo | Download )

bxSlider is a jQuery HTML content slider and image slideshow.

bxSlider

19. Minimit

( Demo | Download )

Minimit Gallery is an exceedingly customizable jQuery plugin that does practically everything: galleries and slideshows to carousels and slides and any other thing that has multiple states.

20. Galleria

( Demo | Download )

Galleria is a JavaScript image gallery framework that has been built on the jQuery library. The aim is to make the process of creating professional image galleries easier for the web and mobile devices.

Galleria

21. jQuery Image Gallery

( Demo | Download )

This is an effortless jQuery image gallery plugin.

jQuery Image Gallery

22. rlightbox

( Demo | Download )

rlightbox is another jQuery UI media box that can put on view several kinds of content, for instance, images, YouTube and Vimeo videos. It bears several matchless features like Panorama and Live Re-size. Like other jQuery UI widgets, it is ThemeRoller ready.
[showmyads]
rlightbox

23. jQuery MB Bgnd Gallery

( Demo | Download )

With this jQuery plugin, you can make a suggestive slide show of images as the background of your page; the images will adapt their size to the window size. You can either navigate the gallery with your keyboard or with a control panel displayed where you want in the page.

jQuery MB Bgnd Gallery

24. PikaChoose

( Demo | Download )

PikaChoose is a lightweight jQuery Slideshow plugin that make allowances for unproblematic presentation of photos with carousels and lightboxes! Pikachoose is created to be effortlessly installed, trouble-free to setup.

PikaChoose

25. Fluid Thumbnail Bar with jQuery

( Demo | Download )

With this plugin, you can make a fluid thumbnail bar that pages through the images it contains.

Fluid Thumbnail Bar with jQuery

27. Elastic Image Slideshow with Thumbnail Preview

( Demo | Download )

Here, we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and you can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

Elastic Image Slideshow with Thumbnail Preview

28. Fullscreen Slideshow with HTML5 Audio and jQuery

( Demo | Download )

In this jQuery tutorial, we’ll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sound with the HTML5 audio element in order to give life to the gallery and try to recreate the ambiance of this vibrant city.

Fullscreen Slideshow with HTML5 Audio and jQuery

29. Image Wall with jQuery

( Demo | Download )

With this plugin, you can create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

Image Wall with jQuery

30. Rotating Image Slider with jQuery

( Demo | Download )

Rotating Image Slider with jQuery

31. Moving Boxes Content with jQuery

( Demo | Download )

With this plugin, you can create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area.

Moving Boxes Content with jQuery

32. Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

( Demo | Download )

With this jQuery plugin, you can create a beautiful full-screen slideshow.

Supersized 3.2 – Fullscreen Slideshow jQuery Plugin

33. Flip Box

( Demo | Download )

Flip is a jQuery plugin that will easily flip your elements in four directions.

Flip Box

34. Innovation Slide – Slide jquery plugin

( Demo | Download )

With this plugin, you can create a simple, lightweight, effects-laden and very versatile photo slide. It will allow us to flow in a “different” our content: images, text, etc.

Innovation Slide - Slide jquery plugin

35. TN3 Gallery

( Demo | Download )

With TN3 Gallery, you can easily create amazing photo galleries and slideshows with slick transition effects, as well as multiple albums, CSS skinning, XML and Flickr support with a host of additional features. No browser plugins required.

TN3 Gallery

36. Shutter Effect Portfolio with jQuery and Canvas

( Demo | Download )

In this jQuery tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy-to-use jQuery plugin that you can easily incorporate into any website.

Shutter Effect Portfolio with jQuery and Canvas

37. Photobooth with PHP, jQuery and CSS3

( Demo | Download )

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

Photobooth with PHP, jQuery and CSS3

38. Making a Flickr-powered Slideshow

( Demo | Download )

In this tutorial we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets. The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which, it will create the markup of the slideshow and listen for events.

Making a Flickr-powered Slideshow

39. How to Make Auto-Advancing Slideshows

( Demo | Download )

With this plugin, we can create HTML5 Slideshow auto advance with a few lines of jQuery.

How to Make Auto-Advancing Slideshows

40. Sliding Contents With JQuery

( Demo | Download )

The purpose of Slider Kit is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus, etc.) into one lightweight and flexible plugin combined with ready-to-use CSS skins.

Sliding Contents With JQuery

41. Slides

( Demo | Download )

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

Slides

42. Slidy

( Demo | Download )

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

Slidy

Are you eager for even more and newer jquery image and slider solutions? Due to high popularity to this article, we created for you follow-up article scouring Internet even deeper and finding even more awesome solutions for your  website! Check new Jquery image collection now!

28 Written ArticlesWebsite

Jameel Khan is a web graphic designer and has been working in this field for 4 years. He also writes for other blogs and is also the founder member of www.webdesigncore.com. His biggest passion is blogging and vector illustrations.

15 Comments Best Comments First
  • Wilson Joseph

    Thursday, December 29th, 2011 12:21

    5

    Very nice Scripts, Thanks

    +16
  • vini

    Thursday, May 3rd, 2012 01:16

    15

    Thnks for this…really the all exam. are very impressive.

    +14
  • Seenu

    Monday, February 13th, 2012 13:06

    14

    i love this website…! each visit gives me something new and useful…!

    +10
  • Abhilasha

    Monday, January 30th, 2012 11:31

    13

    Very nice collection.. so useful.. Thank u vry much.. Thanx a ton..!!

    +7
  • David C

    Friday, December 30th, 2011 00:17

    7

    amazing and stunningly beautiful plug-ins. I also use the made your own paper plug-in. Just speechless.

    +5
  • takien

    Thursday, December 29th, 2011 02:46

    3

    Very useful lists, btw why don’t you include jQuery CarouFredSel, I think it’s the best content/image slider ever.
    Thankyou

    +2
    • Fred

      Thursday, December 29th, 2011 10:15

      4

      +1
      jQuery is the best image slider

      0
  • Matías

    Thursday, December 29th, 2011 02:16

    2

    I love this blog. Thanks very much for the resources.

    +1
  • Kenny

    Tuesday, January 3rd, 2012 09:57

    10

    Thanks for this collection of jQuery sliders. Most of them really look ‘fresh’ and useful =)

    -1
  • Divyang

    Saturday, December 31st, 2011 21:24

    9

    The list is good. But too much effects in sliding and auto-rotate overkills users experience. Look at big blogs like Techcrunch.com, Huffpost or others. They use minimalistic featured content sliders.

    -4
  • Dan

    Thursday, December 29th, 2011 01:06

    1

    Some very cool jQuery sliders, thanks for sharing!

    I really like Timelinr, I already have an idea how this can be of some use :)

    -6
  • modra ideja

    Friday, December 30th, 2011 12:29

    8

    great sliders, tnx for this list!

    -7
  • jayendra

    Tuesday, January 24th, 2012 07:50

    12

    Nice collection. Thanks for sharing

    -7
  • Mohsin Nazir

    Friday, January 20th, 2012 13:42

    11

    These sliders are interesting

    -7
  • Jakub

    Thursday, December 29th, 2011 14:28

    6

    I think the timeline is my favourite too, but great collection thanks for sharing!

    -13
  • vini

    Thursday, May 3rd, 2012 01:16

    15

    Thnks for this…really the all exam. are very impressive.

    +14
  • Seenu

    Monday, February 13th, 2012 13:06

    14

    i love this website…! each visit gives me something new and useful…!

    +10
  • Abhilasha

    Monday, January 30th, 2012 11:31

    13

    Very nice collection.. so useful.. Thank u vry much.. Thanx a ton..!!

    +7
  • jayendra

    Tuesday, January 24th, 2012 07:50

    12

    Nice collection. Thanks for sharing

    -7
  • Mohsin Nazir

    Friday, January 20th, 2012 13:42

    11

    These sliders are interesting

    -7
  • Kenny

    Tuesday, January 3rd, 2012 09:57

    10

    Thanks for this collection of jQuery sliders. Most of them really look ‘fresh’ and useful =)

    -1
  • Divyang

    Saturday, December 31st, 2011 21:24

    9

    The list is good. But too much effects in sliding and auto-rotate overkills users experience. Look at big blogs like Techcrunch.com, Huffpost or others. They use minimalistic featured content sliders.

    -4
  • modra ideja

    Friday, December 30th, 2011 12:29

    8

    great sliders, tnx for this list!

    -7
  • David C

    Friday, December 30th, 2011 00:17

    7

    amazing and stunningly beautiful plug-ins. I also use the made your own paper plug-in. Just speechless.

    +5
  • Jakub

    Thursday, December 29th, 2011 14:28

    6

    I think the timeline is my favourite too, but great collection thanks for sharing!

    -13
  • Wilson Joseph

    Thursday, December 29th, 2011 12:21

    5

    Very nice Scripts, Thanks

    +16
  • takien

    Thursday, December 29th, 2011 02:46

    3

    Very useful lists, btw why don’t you include jQuery CarouFredSel, I think it’s the best content/image slider ever.
    Thankyou

    +2
    • Fred

      Thursday, December 29th, 2011 10:15

      4

      +1
      jQuery is the best image slider

      0
  • Matías

    Thursday, December 29th, 2011 02:16

    2

    I love this blog. Thanks very much for the resources.

    +1
  • Dan

    Thursday, December 29th, 2011 01:06

    1

    Some very cool jQuery sliders, thanks for sharing!

    I really like Timelinr, I already have an idea how this can be of some use :)

    -6

Comments are closed.

54.161.175.231 - unknown - unknown - US