100 jQuery Sliders for Images/Content (Part 2)

Sam Deering
Tweet

There are so many different types of jQuery sliders available these days, sliding horizontal panels, transition effects, patch down/up, fade in/out etc… jQuery Image sliders are great for grabbing a visitors attention immediately and showing them the key features of your business. jQuery content sliders can be used to elegantly show information about your business without scaring off visitors. Below is the second part (plugins 51-100) of our huge collection of jQuery sliders for your images and content! Enjoy!

100 jQuery Sliders for Images/Content (Part 1) – 1-50

51. jQuery Image / News Slider with Caption Tutorial

Learn how to create a news slider that come with the following features:
> Slideshow with Image and description/caption
> Previous, next, pause and play buttons
> On mouse over, pause the slideshow, and play it on mouse out
> Sliding effect for both gallery panel and excerpt panel
> Adjustable slideshow speed
> And, finally, smarter script that will calculate width and height for the slideshow


News Slider with Caption

Source Demo

52. jFlow Plus

Is an update to the popular ultra-light-weight jFlow slider. This new addition comes with an auto slide and pause functionality and will be continually updated with additional features.


jFlow Plus

Source + Demo

53. CU3ER Image Slider

It is an image slider initially conceived to create 3D transitions between slides, turned out to be a convenient and multifunction solution that can be applied in a range of website building areas, from content slider to feature slider and image & banner rotator.


CU3ER

Source + Demo

54. Simple iTunes-like Slider

Learn how to create a slider similar to the one used in the iTunes store.


iTunes-like Slider

Source Demo

55. Fancy Sliding Form with jQuery

Learn how to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have field sets of a form instead of images.


Fancy Sliding Form

Source Demo

56. A Bullet-Proof Content Viewer

Create an attractive and space-saving content viewer which even works with JavaScript disabled. We’ll build a solid core of semantic HTML, styled with some basic CSS and we’ll then use jQuery to add further enhancements in the form of transition animations.


Bullet-Proof Content Viewer

Source Demo

57. Mootools Slider with Two Knobs

You can very easily change the look and feel of the range indicator (in blue in the above example), slider knob, the slider track by modifying the slider.css as required.


Mootools Slider

Source + Demo

58. Create Featured Content Slider using jQuery UI

Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.


Featured Content Slider

Source + Demo

59. Ultra Versatile Slider

An ultra versatile slider with horizontal scrolling and animated effects using MooTools.


Ultra Versatile Slider

Source Demo

60. Apple Style Slideshow

Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases required.


Apple Style

Source Demo

61. Resizable Image Grid with jQuery

Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.


Resizable Image Grid

Source + Demo

62. Kwicks

Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect (of the same name), but has evolved into a highly customizable and versatile widget.


Kwicks

Source + Demo

63. Highslide JS

Is an image, media and gallery viewer written in JavaScript.
Features:
> Quick and elegant looking.
> No plugins like Flash or Java required.
> Popup blockers are no problem. The content opens within the active browser window.
> Single click.
> Lots of configuration options and scalability without compromising on simplicity.
> Outstanding, unconditional and free user support for both commercial and non-commercial users.
> Compatibility and safe degrading.
> Source code included.


Highslide JS

Source + Demo

64. jQuery Tools Scrollable

Scrollable is the most successful tool in this library. Any size and shape. Infinite loops and more.


jQuery Tools Scrollable

Source Demo

65. jQuery Content Slider

In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider.


jQuery Content Slider

Source Demo

66. Animate Panning Slideshow with jQuery

The makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.


Animate Panning Slideshow

Source + Demo

67. Image Rotator

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.


Image Rotator

Source Demo

68. Exposure

Is a jQuery plugin for rich and smart photo viewing that can handle very large amounts of photos.


Exposure

Source Demo

69. Start/Stop Slider

The slider does feature a stop/start button and the animation goes a little farther than simply sliding to the left.


Start/Stop Slider

Source Demo

70. Space Gallery jQuery Plugin

Again another image gallery. Click on the images bellow to see it in action.


Space Gallery jQuery Plugin

Source + Demo

71. Animated JavaScript Slideshow

This dynamic JavaScript slideshow is feature-packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status.


Animated JavaScript Slideshow

Source + Demo

72. YoxView

Is a free image and video viewer for websites. It’s written in JavaScript using jQuery and is available as a jQuery plugin.


YoxView

Source + Demo

73. Simple Slide

Is a jQuery slideshow plugin. It’s easy to use, small and flexible.


Simple Slide

Source + Demo

74. Slide Deck

Is an easy to implement with a great design.


Slide Deck

Source + Demo

75. Piecemaker

Is an open source 3D Flash image rotator gallery.


Piecemaker

Source Demo

76. FancyMoves

Is a great jQuery image slider to show off services, products, or whatever you can dream up. The main image is enlarged to attract your focus. There are three ways to navigate to the next / last item: using your keyboard arrows, using the left and right arrows on the sides of the slider, or simply clicking on the next or last item in the slider.


FancyMoves

Source Demo

77. Easing Slider

WordPress’s ultimate content slider based on the jQuery easing plugin.


Easing Slider

Source + Demo

78. Riva Slider

Create and display slideshows within minutes. No commotion and designed for ease of use, saving you tons of time to spend on things that matter. Intelligently constructed styling panels allow you to completely customize each slideshow, unlike any other plugin of this kind.


Riva Slider

Source + Demo

79. Orbit

Is a killer jQuery image slider plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.


Orbit

Source + Demo

80. AnythingSlider

Is a jQuery image slider Plugin with a lot of features (Slides can be anything, Navigation tabs are built and added dynamically.


AnythingSlider

Source Demo

81. jQuery Banner Rotator/jQuery Slider

This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.


jQuery Banner Rotator

Source Demo

82. Coin Slider

jQuery image slider with unique effects.


Coin Slider

Source + Demo

83. Cycle

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.


Cycle

Source + Demo

84. Dragdealer

Is much more than a simple jQuery image slider. It offers a wide variety of features related to dragging, but is also quite powerful for creating different types if image sliders.


Dragdealer

Source + Demo

85. jqFancyTransitions

Is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.


jqFancyTransitions

Source + Demo

86. Horinaja

Is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery.


Horinaja

Source + Demo

87. Agile Carousel

jQuery plugin that allows you to easily create a custom carousel. Call jQuery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!


Agile Carousel

Source + Demo

88. SLIDORION

A combination of an image slider and an accordion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion is a great alternative to the traditional jQuery slider.


SLIDORION

Source Demo

89. SliderWall

SliderWall is 100% based on HTML5, CSS3 and JavaScript and can be used to create all types of sliders, from dynamic feeds to image sliders.


SliderWall

Source Demo

90. Slider Kit – Sliding Contents with jQuery

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


Sliding Contents with jQuery

Source Demo

91. RhinoFader – A simple jQuery Fade Slider

Rhinofader is a compact, simple slideshow / slider without a lot of knick-knacks. Not a thousand effects, not a thousand settings, only the fade-effect. Yes! Rhinofader also works fine with HTML content.


RhinoFader

Source Demo

92. Basic jQuery Slider

A simple, no-frills, robust jQuery plugin for creating beautiful slideshows for your featured content.


Basic jQuery Slider

Source + Demo

93. FLEXSLIDER

An awesome, fully responsive jQuery slider plugin.


FLEXSLIDER

Source + Demo

94. WOW Slider

Is a jQuery image slider with stunning visual effects (Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns, Stack, Stack vertical and Basic linear) and tons of professionally made templates. WOW Slider is packed with a point-and-click wizard to create fantastic sliders in a matter of seconds without coding and image editing.


WOW Slider

Source Demo

95. Advanced Slider – jQuery XML slider

Advanced Slider is a jQuery plugin that allows you to easily create powerful sliders using either XML , thus making the slider much easier to setup and maintain, or using HTML markup. The plugin also provides an easy to use API which will allow to further enhance the functionality of the slider and make it possible to integrate it into your own application.


Advanced Slider

Source Demo

96. ChopSlider

This awesome slider with a chopping effect was last updated on June 20, 2011. The ChopSlider uses full power of CSS3 animation, has own CSS3 support detection and even old or Internet Explorer support it, a little bit different but still awesome. It will be free under the MIT license, once released. The creator still running some tests.


ChopSlider

Source + Demo

97. Merging Image Boxes with jQuery

The idea is to have a set of rotated thumbnails that once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter into the little box shaped thumbnails again.


Merging Image Boxes

Source Demo

98. Full-page Image Gallery

Create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is having a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse.


Full-page Image Gallery

Source Demo

99. Mosaic! jQuery Plugin

Automatically generates sliding boxes and captions. Among its multiples features includes allowing slide & fade animations with custom directions and pre-loaded images within boxes. The implementation is fairly easy; it operates with two panels – an overlay and a backdrop. The content in the overlay gets repositioned according to the options that you provide.


Mosaic!

Source Demo

100. Fullscreen Gallery with Thumbnail Flip

This plugin will help you to create a fullscreen gallery with jQuery, the goal is having a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where you’re navigating.


Fullscreen Gallery with Thumbnail Flip

Source Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.