Monday, December 26, 2011

10 jQuery Slider Tutorials


10 jQuery Slider Tutorials         
Marvin
As an essential web development tool, jQuery tutorials is used in creating a wide range of apps, plugins, and programs designed to help maximize your website. When used in sliders, jQuery helps produce a lightweight yet extensive and highly useful application.

Here are 10 tutorial sites I’ve gathered on how to create awesome jQuery sliders which you can integrate in your WordPress blog.

TN3 Gallery

This great slideshow is compatible with all modern desktop and mobile browsers. It is highly customizable and has multiple effects and transitions, full-screen and slideshow options, CSS skinning, and more.



Mosaic Slideshow

This Mosaic slideshow tutorial shows you how to make a jQuery mosaic gallery, with a tile transition effect when you move the images from one slide to another.


http://tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/

Elastic Image Slideshow with Thumbnail Preview                  

This tutorial will teach you how to create an elastic slideshow with thumbnail preview. The slideshow automatically adjusts to its container, where you can navigate through the slides with the autoplay option.
 


http://tympanus.net/Tutorials/ElasticSlideshow/


Rotating Slideshow                       

This tutorial shows us how to use jQuery and CSS rotations that could spice up your pages with featured content.





MopSlider Content Slider

This MopSlider plugin is generated with PHP, and as a data source for the configurations, we are going to use plain txt file. Icons used on this tutorial are from tonev.deviantart.com.



http://tutorialzine.com/2009/10/slick-content-slider-jquery/

Apple-Style Slideshow Gallery

Learn how to create an Apple-style slideshow gallery, with the same effect that Apple uses to display their products on their website. It is entirely front-end based and no database or PHP required.




http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/

Automatic Image Slider

This tutorial shows how to create simple widgets such as this image slider using HTML/CSS/Javascript. Because it’s based on HTML, it allows you to incorporate SEO into your website and adjusts accordingly to sites without Javascript.





                            
Minimalist jQuery slider 

This is a step-by-step tutorial on how you can create this jQuery slider with image description and name.





Panning Slideshow with jQuery                          

In this tutorial, you’ll make a slideshow with a twist, using a different type of transition to animate between sliding effects. 

                                                                 


Basic Slideshow with Transparent PNG Frame

This tutorial is for those who are relatively inexperienced because it shows you the basics, and focuses more on working with layered PNG’s in web layouts.



http://buildinternet.com/2009/06/how-to-make-a-slideshow-with-a-transparent-png-frame/

No comments:

Post a Comment