100 jQuery Sliders for Images/Content (Part 2)

Share this article

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

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


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.


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


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

Frequently Asked Questions (FAQs) about jQuery Sliders

How Can I Customize the Appearance of My jQuery Slider?

Customizing the appearance of your jQuery slider is quite straightforward. You can use CSS to style your slider. For instance, you can change the color, size, and shape of the slider handle, or even the color and thickness of the slider bar. You can also add images or icons to your slider handle to make it more visually appealing. Remember to always test your changes to ensure they work as expected across different browsers and devices.

How Can I Add Multiple Sliders on a Single Page?

You can add multiple sliders on a single page by creating multiple instances of the slider. Each slider should have a unique ID to avoid conflicts. You can then use these IDs to target and initialize each slider separately. Be careful not to overload your page with too many sliders as it can affect the page’s performance and user experience.

Can I Use jQuery Sliders on Mobile Devices?

Yes, jQuery sliders are compatible with mobile devices. However, you may need to make some adjustments to ensure they work properly on smaller screens. For instance, you might need to adjust the size of the slider handle to make it easier to drag on a touchscreen. You should also ensure that your slider is responsive so that it adjusts its size and layout based on the screen size.

How Can I Add Labels to My jQuery Slider?

Adding labels to your jQuery slider can be done using HTML and CSS. You can create a div element for each label and position it relative to the slider using CSS. You can then use jQuery to update the label’s text whenever the slider value changes. This can be useful for providing users with more context about the slider’s value.

How Can I Use a jQuery Slider to Control a Video Playback?

You can use a jQuery slider to control video playback by linking the slider’s value to the video’s current time. Whenever the slider value changes, you update the video’s current time accordingly. Similarly, when the video’s current time changes, you update the slider’s value. This can be a bit complex, but it provides a powerful way to give users control over video playback.

Can I Use jQuery Sliders Without jQuery UI?

Yes, you can use jQuery sliders without jQuery UI by using a standalone slider plugin. There are many such plugins available, each with its own features and capabilities. However, keep in mind that these plugins might not be as well-tested or widely supported as jQuery UI, so choose carefully.

How Can I Add Ticks or Marks to My jQuery Slider?

Adding ticks or marks to your jQuery slider can be done using CSS. You can create a series of small div elements and position them along the slider bar using CSS. You can then use jQuery to highlight the current tick whenever the slider value changes. This can be useful for providing a visual indication of the slider’s value.

How Can I Make My jQuery Slider Move in Discrete Steps?

You can make your jQuery slider move in discrete steps by setting the ‘step’ option when initializing the slider. The value of the ‘step’ option determines the size of each step. For instance, if you set the ‘step’ option to 10, the slider will only move in increments of 10.

Can I Use jQuery Sliders to Filter Data on My Website?

Yes, you can use jQuery sliders to filter data on your website. You can do this by linking the slider’s value to your data filtering function. Whenever the slider value changes, you update the filter and refresh the data display. This can be a powerful way to give users control over the data they see.

How Can I Add a Tooltip to My jQuery Slider?

Adding a tooltip to your jQuery slider can be done using the ‘slide’ event. You can create a tooltip element and update its text and position whenever the ‘slide’ event is triggered. This can be useful for providing users with real-time feedback about the slider’s value.

Sam DeeringSam Deering
View Author

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week