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!
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
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.
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.
54. Simple iTunes-like Slider
Learn how to create a slider similar to the one used in the iTunes store.
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.
56. A Bullet-Proof Content Viewer
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.
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.
59. Ultra Versatile Slider
An ultra versatile slider with horizontal scrolling and animated effects using MooTools.
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.
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.
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.
63. Highslide JS
> 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.
64. jQuery Tools Scrollable
Scrollable is the most successful tool in this library. Any size and shape. Infinite loops and more.
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.
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.
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.
Is a jQuery plugin for rich and smart photo viewing that can handle very large amounts of photos.
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.
70. Space Gallery jQuery Plugin
Again another image gallery. Click on the images bellow to see it in action.
73. Simple Slide
Is a jQuery slideshow plugin. It’s easy to use, small and flexible.
74. Slide Deck
Is an easy to implement with a great design.
Is an open source 3D Flash image rotator gallery.
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.
77. Easing Slider
WordPress’s ultimate content slider based on the jQuery easing plugin.
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.
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.
Is a jQuery image slider Plugin with a lot of features (Slides can be anything, Navigation tabs are built and added dynamically.
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.
82. Coin Slider
jQuery image slider with unique effects.
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.
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.
Is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
Is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery.
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!
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.
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.
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.
92. Basic jQuery Slider
A simple, no-frills, robust jQuery plugin for creating beautiful slideshows for your featured content.
An awesome, fully responsive jQuery slider plugin.
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.
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.
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.
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.
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.
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.
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.
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.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well