In the previous tutorial we created a tutorial that was controlled by clicking the next link which took the top most image in a stack and placed it at the bottom of the stack, today we are going to automate the flipping through of the images by adding a simple autoadvance function.
Best jQuery Slider Plugins & Tutorials with Demo
Slide Navigation Using JQuery With Easing Plugin
The navigation at apple mac page are using an easing effect, it separating each product by the category, I love the effect when user click on the navigation it like the products appear and disappear one by one, with the easing effect on the end movement, like bouncing on the vertical line
If you see the source code on apple page, seems they are still using prototype.js, once are the most popular javascript framework, before the appearance of jquery. In this post I want to create something like the apple mac navigation menu using jquery easing plugins.
Slicebox – A fresh 3D image slider with graceful fallback
With the CSS3 3D transformations we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object. In case the browser does not support 3D transformations, a simple slider will be used as fallback.
jQuery Diapo slideshow
Diapo slideshow is an open source project.Diapo slideshow is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). But I don’t think I will spend many hours to improve this feature, sorry.
Diapo slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing (http://gsgd.co.uk/sandbox/jquery/easing/), jQuery HoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html), jQuery Mobile (http://jquerymobile.com/)
jQuery Slider Plugin Flexslider
In responsive design, we are creating responsive experiences, meaning that all design components need to be able to adapt to the environment in which they are displayed and have to interact with. This is why we create tables, navigation menus, videos and other design elements responsive as well (see Responsive Web Design Techniques and Design Strategies for more details). It just makes sense to consider each and every design component — including the image slider.
jQuery File Tree
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.There are lot of file tree plugins available in market but this plugin comes with scrips which PHP,ASP and JSP scripts which can read the directory structure on the server and create the file tree. The plugin is highly configurable.
WOW Slider in JQuery
The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It’s a very effective method to increase the web site usability and engage the user. The WOW Slider w as updated in April 11, 2011, this is a jQuery image slider with stunning visual effects (Blast, Fly, Blinds, Squares, Slices, Basic, Fade, Ken Burns) and tons of professionally made templates. Is free for non-commercial use, a license fee is required for business use.
ChopSlider – jQuery & CSS3 animated Slider
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 runing some tests.
Expanding Fullscreen Grid Portfolio in jQuery
Today we want to share a neat experimental portfolio template with you. The main idea is to have a grid layout that we create with jQuery Masonry. Clicking to view more, we expand the according item to fullscreen in order to show a longer description of the item and a representative fullscreen background image.
