Browse By

14 Useful JQuery Sliders You Need To Download

JQuery has overpowered Flash in a lot of web uses becoming a very powerful tool for web designers. One of these uses that I’m referring to is the image slider. Implementing this feature in your site will definitely count as a big plus so don’t waste your time and download the available jQuery plugins in this article. If there is a jQuery slider that you need, you’ll find it here.

Automatic Image Slider w/ CSS & jQuery

autrotator

With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.

Quicksand

quicksand

At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items.

Move Elements with Style

roundabout

Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)

In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.

Nivo – A new jQuery image slider

nivo-jquery-slider

This is a new launched image slider what use jQuery. Is cross browser and have 9 unique transition effects, navigation controls, is simple, clean, valid markup and free.

Making a Google Wave History Slider

wave

We’ve all seen the videos (and some even got access to a developer’s preview) of Google’s latest product – Wave. Although not “ground-braking” and “revolutionary” as we’ve imagined (wonder why “over-hyped” comes to mind) it still features some great UI that will surely inspire at least a few developers to implement some of it in their works.

I, being one of those inspired people, am going to show you how to create a Google Wave-like history slider. Using it, we will enable our visitors to go back and forth in time to view the changes that take place on a comment thread.

JQuery Clock Slider

clock

Animate Panning Slideshow with jQuery

panning-slideshow-banner

Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well.

In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.

jDigiClock jQuery plugin

clockslide

Moving Boxes jQuery slider

movingboxes

I’m not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out.

The iPhone unlock screen in xHTML, CSS and jQuery

iphone_unlock

The iPhone: Everybody knows what it is, many people “played around” with the gadget and most people love it. I also own one of these amazing smartphones, and the looks of the software is really, really sleek and innovative (Just like we’re used from Apple).

I wanted to transfer (some) of these amazing designs to a webpage to re-create the same look and feel for webbrowsers. Today, I’m going to show you how to create The iPhone unlock screen in xHTML, CSS and jQuery.

Create Beautiful jQuery slider tutorial

jQuerysliders_thumb8

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.

jQuery Infinite Carousel

infinitecar

jQuery pageSlide

jquery-pageslide-screenshot

jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or “throwing”) content aside to reveal a secondary content pane.

Mootools Slider With Two Knobs

mootools_slider

You can very easily change the look and feel of the range indicator ( in blue in the above example), slider knob, the slider track by modifying the slider.css as required.

Building a jQuery Image Scroller

imageScroller1

In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.

Leave a Reply

Your email address will not be published. Required fields are marked *