11 | 03 | 2010
Main Menu
Affiliates
Login Form



Alexa
JoomlaWatch Stats 1.2.6 by Matej Koval
14 Best JavaScript Sliders And Scrollers
Written by Phoenix   
Friday, 14 August 2009 15:59

Rating 0.0/5 (0 vote)

Sliders and scrollers have evolved to be a window to a websites wonderful content and images. Showcase the exquisite content of your website with the awesome JavaScript Scrollers and Sliders available on the web. Here I present the best collection of JavaScript Sliders and Scrollers collection.

 

1. Simple images slider to create Flickr-like slideshows 

Since long time I was looking for a simple way to implement a Flickr-like slideshow ("image carousel") and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.

 

2. Accessible slider

An "element API" — a script that combs a form element for relevant information (data values, key structural characteristics), and uses that information to build a new widget on the fly and insert it into the DOM.

 

3. Unobtrusive Slider Control

The slider can be associated with both text input and select list form elements. All of the Sliders configuration parameters should be defined within the form.

 

4. Slider

  

Sliders are useful controls for choosing a value in a range of values. Common uses are volume controls, seekers for movie and sound files as well as color pickers. A few people have asked for an update to the old Slidebar component to make it work in Mozilla and work better in IE. But since the original control was very basic and was not very usable I decided to create a new one.

 

5. Photo Slider

Learn how to create a Photo Slider all on your own with ease.

 

6. Accessible News Slider 

Accessible News Slider is a JavaScript plugin built for the jQuery library. It meets the accessibility requirements as outlined by WCAG 1.0. 

 

7. YUI Library: Slider



The Slider component is a UI control that enables the user to adjust values in a finite range along one or two axes. Typically, the Slider control is used in a web application as a rich, visual replacement for an input box that takes a number as input. The Slider control can also easily accommodate a second dimension, providing x,y output for a selection point chosen from a rectangular region. 

 

8. Fireworks.js

Fireworks.js is a bit of Javascript that creates starburst-type explosions in a web document; in short, it's a fireworks effect someone could theoretically use on their site. And come on, who doesn't want something like that? As far as appropriateness is concerned, this effect could be compared to the dripping-blood-line, skull and fireball animated .GIF images so popular on the web in 1997. Exploding firework animations are hot, the new black, the script equivalent of the blink tag. Mmm, blink tag.

Nonetheless, Fireworks has been published here for fun, experimenting a bit with simple trigonometry and math, and those who are perhaps interested in javascript animation, object-oriented code or script-driven sound. It also serves as a dirty browser performance test of sorts, as a large number of elements are dynamically created, moved and destroyed on this page as the script runs.

 

9. Slide Gallery

This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch.

 

10. 2J News Slider

This extension it's very flexible and useful tool for every joomla website, which make you able to build animated front end section (with 2JNewsSlider module, plugin/mambot and component). 2JNewsSlider component reading content articles from Joomla category and showing them at front end 2JNewsSlider module, inside Joomla content article (with 2JNewsSlider mambot/plugin) or using direct link to 2JNewsSlider component. 2JNewsSlider building slides from the intro text of articles (with headline and images).
Very wide range of effects and settings, make it more flexible for personalization. All elements of the front end interface could be easily changed by CSS styles (in admin section of the component : CSS editor).
2JNewsSlider could be used in very wide range of cases. For example: as headlines rotator at your news or personal site; as showcase for property and e-commerce sites; as front end module for representing animated list of your products and services; with 2JNewsSlider you can easily build presentation section of your webside.

 

11. Ajax Image Sliders

This method requests a series of images from the server, at a set interval along the entire slider.  These images are requested as the page is loading, new requests are made when the slider has finished moving.  The pre-loaded images are stored in their own image tags, hidden and shown when needed.  This is along the same lines as many image pre-load scripts that were used for rollovers, many years ago.

 

12. Coda-Slider

These last couple of weeks in work I’ve been getting to grips with the jQuery JavaScript library to provide some cool effects on an interface I’ve been building. One effect I hoped to create was a tabbed sliding div type thing, like Panic have on their Coda site. I couldn’t find anything quite like that ready-made with jQuery, so I went about doing it myself. Using Gian Carlo Mingati’s excellent slideViewer as a starting point, I was able to achieve the desired effect. At the risk of getting sued, I’ve called it Coda-Slider.

 

13. Serial Scroll

This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, also combined. 

 

14. jsScrollBar

Your JavaScript key for creating an awesome Scroller.

Comments
Search
Only registered users can write comments!

3.22 Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."