Home arrow JavaScript arrow The Top jQuery Slider Plugins
JAVASCRIPT

The Top jQuery Slider Plugins


Sliders are a great way to put images on display. Not only do they add extra functionality to a site, but they also add a wow factor to really spruce up the display of your images. Luckily, many developers have been kind enough to create jQuery slider plugins and tutorials to help make the implementation of sliders much easier. While jQuery itself is easy to use, jQuery plugins help simplify things even more. To give you an idea of some of the functionality and plugins that are out there on the Web, here is a list of some of the top jQuery slider plugins.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
March 28, 2012

print this article
SEARCH DEVARTICLES

Sliders are a great way to put images on display. Not only do they add extra functionality to a site, but they also add a wow factor to really spruce up the display of your images. Luckily, many developers have been kind enough to create jQuery slider plugins and tutorials to help make the implementation of sliders much easier. While jQuery itself is easy to use, jQuery plugins help simplify things even more. To give you an idea of some of the functionality and plugins that are out there on the Web, here is a list of some of the top jQuery slider plugins.

Nivo Slider



Simply put, Nivo Slider has to be considered as one of the best sliders around.  At only 12kb in size, it has plenty to offer in terms of customization and effects.  There are 16 unique transition effects in all, so the chance of you finding one to fit your siteís needs is high.  The plugin comes with three themes, support for linking images, and many adjustable settings.  You can add captions for added detail, and customers can make use of keyboard navigation for extra functionality.  If you are looking for a jQuery slider that can really add some punch and flair to your images, Nivo Slider deserves a serious look.

Link: http://nivo.dev7studios.com/

An HTML5 Slideshow with Canvas and jQuery

This tutorial is a mixture of a little bit of everything.  It employs the HTML5 canvas element that lets users both create and modify graphics.  In addition, jQuery animations are applied to produce the final result of an eye-catching slideshow. 

The tutorial uses JavaScript to add a special filter to the slideshow images.  It then moves on to tweaking the images even more to improve contrast and color with canvas.  Each time a visitor to the site moves on to the next slide, a nice lighting effect is created by showing the canvas with a fadeIn animation.  The slideshow gallery is easy to create, looks good, and functions as one would hope, making this a tutorial worth visiting if you want to display your images correctly and stand out from the crowd.

Link: http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/

Coin Slider jQuery Image Slider with Unique Effects



Coin Slider is an impressive jQuery slider that is ideal for sites that are loaded with images or focus on photography.  Unique transition effects are used that look good and function well.  The slider will switch slides automatically for users, or they can jump to their slide of choice with ease.  You can add captions, and image linking is available as well.  Several configuration options are available.  Want to customize the slider even further?  You can do so with CSS.  The plugin is also lightweight at only 8kb in size.  In response to the increasing popularity of mobile devices, itís compatible with Android devices and the iPhone so you can show off your skills to even more visitors. 

Link: http://workshop.rs/projects/coin-slider/

Creating a Polaroid Photo Viewer with CSS3 and jQuery



Polaroid-styled photos seem to be a thing of the past, especially with all the new camera technology thatís now available.  Still, Polaroid photos offer a nice vintage look to images, and that is what this particular link teaches.  Perfect for a photography site, you can take images, add a Polaroid look to them, and stack them so that users can move and view them around as they wish.  The fact that visitors have some control over the placement of the images and can use a basic drag and drop movement to view them also adds interactivity to your site and helps to keep things interesting.

Link: http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html

Sliding Boxes and Captions with jQuery



The effects displayed from this jQuery plugin are quite interesting and unique.  What you get is sliding box animations that can be easily customized.  Each time a user moves their cursor into a particular box, an animation moves the picture or caption however you tell it to.  Each animation is composed of a window/container, sliding element, and background image or content, and you can tweak the setup to achieve different desired effects. 

Link: http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

Highslide JS



Written in JavaScript, Highslide JS is described as being an image, media, and gallery viewer that offers several benefits to its users.  First of all, it requires zero Flash or Java plugins.  Second, the final result looks both modern and elegant, making it perfect for implementation in a wide variety of sites.  If someone has a popup blocker enabled, the gallery will still function correctly.  It also functions correctly across various browsers, and if JavaScript is disabled or the visitor is using an outdated browser, Highslide JS will degrade gracefully to still allow the user to browse through content properly. 

Highslide JS offers plenty of flexibility through its customizable options.  Components can be added or removed to tailor your site.  Itís also highly scalable while still maintaining its overall simplicity.  Best of all, Highslide is lightweight and user-friendly.  If you are still unsure about whether Highslide can work for you, simply check out the user testimonials on its site for extra reassurance.

Link: http://highslide.com/

SlideDeck.js

The creators of SlideDeck describe it as ďhands-down, the best jQuery content slider.Ē  When you look at its features, it may be hard to deny that claim.  SlideDeck was not created just for presenting images.  In fact, you can arrange a wide variety of content using the plugin, such as forms, video, PDF files, audio, and more. 

The fact that SlideDeck can handle mixed content is just one way in which it sets itself apart from competitors.  Its touch-screen compatible to take advantage of visitors using mobile touch-screen devices, and it also offers dual-axis sliding.  Highly customizable, SlideDeck is SEO-friendly as well to help you increase your search engine rankings.  There are few sliders that beat SlideDeck in terms of the number of features it supplies, so you should definitely take a trip to the link posted to see more of what itís about.  The only reason it gets listed last here is because it is a premium plugin, while the others in the list are free.

Link: http://developers.slidedeck.com/


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All JavaScript Tutorials
More By wubayou


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials