Friday, October 28, 2011

25+ jQuery Image Slider Plugins and Tutorials

  

Coin Slider

Coin Slider
As with most well written jQuery image slider plugins you can get awesome features on your web pages with only a few lines of code. Coin Slider is an excellent script for showcasing images on a web site or blog, fx. an online portfolio.
  • Unique transition effects
  • Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
  • Valid markup
  • Flexible configuration
  • Auto slide
  • Navigation box
  • Lightweight (8kb only)
  • Linking images
  • Free to use under MIT licence
  • Fully customizable using CSS

JQUERY BANNER ROTATOR / JQUERY SLIDER

jquery banner
This is a jQuery image slider 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.
DOWNLOAD / DEMO – by CodeCanyon (premium plugin)

Supersized

Supersized
Awesome full size/screen jQuery image slider plugin.
  • Resizes images to fill browser while maintaining image dimension ratio
  • Cycles Images/backgrounds via slideshow with transitions and preloading
  • Navigation controls allow for pause/play and forward/back

AVIA SLIDER

image
This plugin features 8 unique transition effects, image preloader, autoplay that stops on user interaction and lots of easy to set options to create your own effects.
DOWNLOAD / DEMO – by CodeCanyon (premium plugin)

Nivo Slider

image
Great and flexible jQuery image slider plugin with awesome transition effects. See for your self here. I personally thought it was flash when I first saw it! More details on features:
  • 9 unique transition effects
  • Simple clean & valid markup
  • Loads of settings to tweak
  • Built in directional and control navigation
  • Packed version only weighs 7kb
  • Supports linking images
  • Keyboard Navigation
  • HTML Captions
  • Free to use and abuse under the MIT license

Dragdealer

Dragdealer
Dragdealer is much more than a simple image slider. It offers a wide variety of features related to dragging, but is also quite powerful for creating different types if image sliders. I recommend you go to the website and try out the demos.

ESTRO JQUERY EFFECT SLIDER

ESTRO JQUERY EFFECT SLIDER
This jQuery image slider plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.
This slider includes a smooth and powerful Ken Burns effect which is completely configurable and compatible with all major browsers (including ie7 to ie9, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad. If the Ken Burns effect is not your thing, that’s OK because the “Estro” slider also includes a 2-way “Swipe” mode with configurable transitions.
DOWNLOAD / DEMO – by CodeCanyon (premium plugin)

Presentation Cycle

Presentation Cycle
Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements.
Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear. Features:
  • Cycle through elements
  • Adjustable animation times
  • Generates a navigation bar that also shows the progress
  • Works in modern browsers

SEXY SLIDER

sexy slider
SexySlider is a jQuery slider plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!
DOWNLOAD / DEMO – by CodeCanyon (premium plugin)

AnythingSlider jQuery Plugin

image
AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful.
  • Slides are HTML Content (can be anything)
  • Next Slide / Previous Slide Arrows
  • Navigation tabs are built and added dynamically (any number of slides)
  • Optional custom function for formatting navigation text
  • Auto-playing (optional feature, can start playing or stopped)
  • Each slide has a hashtag (can link directly to specific slides)
  • Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide)
  • Multiple sliders allowable per-page (hashtags only work on first)
  • Pauses autoPlay on hover (option)Link to specific slides from static text links

Easy Slider 1.7 – Numeric Navigation jQuery Slider

Easy Slider 1.7 – Numeric Navigation jQuery Slider

Great jQuery image slider plugin for content and images. It is very easy to use – only a few lines of code is needed.
  • numeric navigation (as an alternative to next/previous buttons)
  • continuous scroll instead of jumping to the first (or last) slide
  • auto slide
  • continuous sliding
  • “go to first” and “go to last” button
  • hiding controls
  • optional wrapping markup for control buttons
  • vertical sliding
  • multiple sliders on one page

AviaSlider

aviaslider
Very feature rich and good looking image slider.
  • 8 unique transition effects
  • Lots of easy to set options to create your own effects
  • Included Image preloader
  • Autoplay that stops on user interaction
  • Valid HTML5 and CSS 3 Markup
  • Packed version only weights 8kb
  • Supports linked images
  • already prepared to work with prettyPhoto Lightbox
  • works with jQuery 1.32 and higher

3d Rotation Viewer

image
This cool stuff easily creates a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.

horinaja

horinaja
Horinaja is a ready-to-use slide-show implementation, utilizing either scriptaculous/prototype or jQuery. A running example above
  • allows you to use a mousewheel for navigation.
  • automatically create slide indices (pagination), if required

jqFancyTransitions

image
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
  • ‘wave’, ‘zipper’ and ‘curtain’ effect, plus options that can be used for custom effect.
  • compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

Agile Carousel

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!

Feature List

feature-list
This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.
  • Slick effect, no Flash needed
  • It’s just 2K
  • Reusable on multiple containers
  • Cycles items via slideshow
  • Can be styled with custom HTML/CSS

Galleria

image
Galleria is a JavaScript image gallery written in jQuery. Images are loaded one by one from an unordered list and displays thumbnails when each image is loaded. Galleria and a few themes are free to use under the MIT license. More advanced themes, better licensing options, support, integrations for wordpress etc. will soon be available as a premium membership.

loopedSlider

image

Panning Slideshow

image
This slideshow has the ability to showcase imagery automatically. This is a twist from classic slideshows which uses a kind of transition to animate between slides.

jQuery Image Slider Tutorials

Automatic Image Slider w/ CSS & jQuery

Automatic Image Slider w/ CSS & jQuery

How to Create a Simple iTunes-like Slider

How to Create a Simple iTunes-like Slider

Animate Panning Slideshow with jQuery

Animate Panning Slideshow with jQuery

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

Other sliders worth considering

cu3er

cu3er
Flash slider with the most awesome transition effects you can imagine!

Piecemaker XML Gallery

image
Another Flash slider with cool transition effects. This is actually a tutorial and you can learn how to create it yourself!

IT IS COLLECTED FROM INTERNET

No comments: