Really Useful jQuery Sliders, Plugins and Resources for Web Developers

jQuery has found its way into the hearts of many web developers due to its “write less, do more” motto. It really is very simple. Gone are the days when developers had to write endless lines of code to give a very small effect to their image galleries and text. Today, you could give any effect to images, text and everything else in a very seemless manner and integrate them into you websites.

jQuery has many features like event handling, animating and Ajax interactions for rapid web development and ofcourse it helps in increasing the website usability. In this post we are publishing Really Useful jQuery Sliders, Plugins and Resources for Web Developers. Some of these you may have already seen, others might be new to you. If you like any of these jquery and you plan to use them then please read the license agreement of the creator as they may change from time to time.

In the meanwhile you may also want to view some more Javascript OR jQuery related articles

Rotating Image Slider with jQuery

Create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality. jQuery 2D Transformation Plugin is used for rotating the images and the jQuery Mousewheel Plugin by Brandon Aaron for the mousewheel control.

rotating_image_slider.jpg

Demo
Download

CSS3 Animated Bubble Buttons

This jQuery helps you create a useful set of animated buttons with the power of CSS3′s multiple backgrounds and animations. You can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. Four color themes and three sizes are also available by assigning additional class names.

bubble_buttons.jpg

Demo
Download

jShowOff: a jQuery Content Rotator

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements inside a specified wrapper element on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.

image_slider.jpg 

Source

jQuery PhotoShoot Plugin 1.0

The jQuery PhotoShoot plugin gives you the ability to convert any div on your web page into a photo shooting effect, complete with a view finder. The image could be blurred, the opacity could be changed. You could also pass any function that you want.

photoshoot.jpg

Demo
Download

Shutter Effect Portfolio with jQuery and Canvas

Use the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

shutter_effect.jpg

Demo
Download

Google Powered Site Search with jQuery

You could implement search by starting from the ground level or you could use Google Custom Search for the same to simplify all your search tasks. Using Google’s AJAX Search API, to create a custom search engine, with which you can search for web results, images, video and news items on your site. This helps you to embed some beautiful searches on your site.

site_search.jpg

Demo
Download

slidebox jquery banner rotator

A simple jquery/css banner rotator/slideshow with next/previous buttons, slides thumbnails and auto-play feature. It is too simple to implement. This could be a good start for a jQuery Beginner.

slidebox.jpg

Demo
Download

Simple Accordion w/ CSS and jQuery

When designed and implemented with usability in mind, the accordion can be incredibly useful when organizing a good chunk of content. Simple accordion using CSS and jQuery for content.

accordian.jpg

Demo
Source

Create a Typing Text Effect using jQuery

You must have seen text effect on many flash websites. jTicker is a jQuery plugin that can be used for creating typing text effect without the use of flash. This effect comes in handy when you want to force the visitor to read the text. But should be used wherever necessary, as the usability suffers. jTicker can be declared on any element and can be stylized using CSS. You can also use event buttons to play, stop and control the speed of the effect.

jticker.jpg

Demo
Download

RSS Driven Dynamic jQuery News Slider Plugin

Dynamic News is a jQuery news slider plugin that makes news integration to your web site very easy. Dynamic News plugin supports two ways to add news data. You can either enter your news via HTML markups manually or let Dynamic News plugin load the news from rss feed and build the necessary HTML markups automatically. One cool feature of Dynamic News slider plugin is the news preview or news summary pane, hovering over news headline will show news summary in a tool tip like pop up, which also provides link to news detail page. All the features of Dynamic News slider plugin are configurable. Its up to you whether you want to display news preview pane, display control bar, auto hide control bar or keep it always visible.

new_ticker.jpg

Demo
Dowmload

Fading color effect for inline text links using jQuery

Here’s a simple UX trick that can be easily implemented into your web sites. With a few lines of jQuery it will make your text links fade to another color on rollover. Initially the second SPAN is hidden. When the A is hovered the SPAN “two” fades in using jQuery’s fadeTo effect, while SPAN “one” fades out. That creates smooth fading from one color into another.

fade_effect.jpg

Demo
Download

Multi-product Quantity-based Order Form

The main point here is the math. It’s a simple table of products, and each product has an input box for quantity. Changing the value of that quantity box automatically triggers the math and totals are calculated. Row totals are calculated across, then order totals are calculated down. Quantities are totaled and multiplied by a shipping rate and all that is added together.

order_form.jpg

Demo
Download

Start/Stop Slider

This is a jQuery based slider which auto-detects the number of “slides”. There are multiple animations per slide, which auto-plays, but has a start/stop button. Very easy to adapt. Totally Customizable

start_stop_slider.jpg

Demo
Download

jQuery MagicLine Navigation Demo

Slides a highlight (underline or background) to a new navigation item (and back) when they are hovered over. Optional color fading. The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities. As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

magic_line_nevigation_menu.jpg

Demo
Download

Simple jQuery Dropdowns

Very simple, minimally styled, jQuery powered dropdown menus. Cross browser friendly and maintains navigation “trail”. Each “level” is clearly marked in the CSS. Very minimal styling, easy to adapt.

simple_dropdown.jpg

Demo
Download

Grid Accordion

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space. The Grid Accordion works with the same theory as most other accordions. Only one cell is open at a time. The big thing is that the column of the current open cell expands to a reasonable reading width. A grid of cells expand both vertically (like a regular accordion) as well as horizontally to display the content they contain.

infogrid.jpg

Demo
Download

AnythingSlider

jQuery-based slider with lots of features: hashtag linking to direct slides, “infinite” sliding, easing, dynamically built (any number of slides), multiple navigation systems, API, and more. This new 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. Also this slider is an actual plugin as well, which should make implementing it and customizing it much easier.

anythingslider.jpg

Demo
Download

Fancy View Source Button

There are many sites on the internet which use the “View Source” button on many of their pages to give the users the code of a specific demo. This Fancy View Source Button helps you to make this routine thing more fancy, attractive and eye catchy. Using jQuery, Code Prettify, and CSS3 :target, we can make a button that pops up a nice looking view of the current pages source code.

view_source_button.jpg

Demo
Download

Slot Machine Tabs

As you click a different tab, the three columns of text fly upward at different rates and are replaced by new columns. It looks kinda like a slot machine. This could be helpful for many eCommerce sites also site which feature their pricing for various services they are to offer.

organic_tabs.jpg

Demo
Download

Sliding Letters with jQuery

We want to bring some life to the standard hover effect by playing around with the letters in an anchor word. The aim is to slide in letter by letter when hovering over a link element. We can either have the same word or a different one and we can slide in the new letters all the same time or one after the other.

jQuery plugins sliders letters

Demo
Download

Galleriffic

Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. It has features like Smart image preloading after the page is loaded, thumbnail navigation, etc.

Demo
Download

Hash Slider

This jquery-based slider does what the most jquery-sliders do, but adds a hashtag to the window location, so you can link to any content / position of the slider. Features include easy to implement, full styleable via css, mouse wheel integration, direct links to slider postion via hash tag, automatic generated number navigation, etc.

jquery slider

Demo
Download

Orbit jQuery Image Slider

Most jQuery image sliders hover at around 8 kbs for minified versions, and around 15kbs or more for uncompressed development files, but what if there was a way to keep the simple fades, slides and features, and a couple other cool bits, but strip the bloated and corny diagonal-cross fades or spiral dissolves. This jQuery Image slider ensures all of that.

Demo
Download

A music lover, creativity is all that he has in his mind and a very avid reader. He is the Founder of ArtAtm. He is a web designer by profession from India. You may want to Follow Him On Twitter

Rocky – who has written posts on Artatm - Creative Art Magazine.


5 Responses to “Really Useful jQuery Sliders, Plugins and Resources for Web Developers”
  1. Sean Peterson

    A site worth mentioning for those amongst us who, despite lacking in the technical know-how still want to achieve a sleek result is http://www.loxiastudio.com/en

    There are over 30 different slider/slideshows that you create entirely on-line and then simply copy and paste a short line of code into your website.

  2. church website design

    Wow! just amazing…
    I’m going to use it for my future templates.

  3. Web Design Company Mumbai

    Nice Collection of JQuery Plugins.

  4. danielelvito

    great works ,tanx ;)

  5. web2feeds

    Web developers will love this, so I shared your post. Thanks for working on this list.

Leave a Reply