NoUiSlider: A tiny range slider

jQuery UI slider

NoUiSlider is a range slider without the bloat, but with a ton of features. It’s lightweight and as minimal as possible, so it’s compatible on a wide range of devices.

https://github.com/leongersen/noUiSlider/

http://designshack.net/articles/freebies/30-innovative-new-jquery-plugins/

30 _Innovative_New_jQuery_Plugins_Design_Shack.mht

Responsive Touch-Friendly Audio Player

This responsive audio player is the perfect example of jQuery at work. You simply include the plugin codes and create any typical HTML5 audio element. This will automatically be converted into a touch-friendly audio player with a dazzling CSS3 user interface.

Sidr

I am sure plenty of designers & developers recognize the sliding side menu. This became popularized from iOS mobile applications using sliding menu buttons in the toolbar. And now this effect may be replicated for websites using only jQuery and the Sidr plugin. Check out the live demo and see how this could work in your own projects.

Imageloader

Do you remember seeing all these lazyload image plugins? There are so many various options, and even some free open source WordPress plugins have been released. This particular image loader plugin follows a much nicer example with all images loading in a sequential order, following a fading effect. The live demo is a prime example of how you can apply this to your website.

Swatches

Although Swatches may not have a practical use in many website layouts, it is a wonderful jQuery plugin for toying with specific colors. This plugin will create a div area using a palette of related colors based on your input choice. Generating your own color scheme may be difficult and this is a unique open source tool for the job.

Hot on Facebook

Hot on Facebook is a rather obscure idea. But the plugin does work perfectly in all standards-compliant browsers, so for those who enjoy Facebook sharing this is for you! Hot on Facebook will take a URL and check the total number of FB shares. Then it will be displayed on the page as a social media sharing badge.

Toolbar.js

The open source Toolbar.js script is fairly easy to run, but has its limitations. This plugin will create a small tooltip menu of icon links which appears on any element you choose. It can be immensely powerful coupled with a user profile or other icon-command interface. However the effect is rather obscure, so don’t be surprised if you have a hard time fitting this into your layout.

jQuery PowerTip

As for handling regular tooltip hovers you may consider jQuery PowerTip. This is a fairly new plugin released as open source on Github. You can check out the live demo to see a better example, but the simplest explanation is creating tooltip popup menus when hovering over some HTML element.

jqTimeline

The jQtimeline plugin offers very unique functionality which I have never seen before. You can build a horizontal timeline with date events setup throughout the list. In this way, users may click on an event to display more information. It certainly has its practical uses but will take a bit of custom code to get working properly.

Swipebox

The Swipebox plugin is a mobile responsive jQuery image gallery. This is especially designed for mobile webapps and websites which are made responsive for smartphones and tablets. The image gallery will take up the entire screen, and you can even touch-to-swipe between other images in the slideshow.

MixItUp

MixItUp has a lot of various custom options and I would say this is closer to an intermediate jQuery plugin. You will need to understand a few concepts when customizing the default setup and adding this into your page. But it will allow quick sorting of elements within a set gallery like portfolio items, images, photographs, and so much more.

jQuery Spellchecker

Designers who are familiar with the in-browser spellcheck may be a fan or may completely hate it. This jQuery plugin offers a different solution where you may edit the callback function to display related vocabulary. It is a daring plugin which is completely free to use, but also requires a bit of customization to get working correctly.

ScrollUp

ScrollUp is in my top 5 new favorite plugins just for its ease of use and pre-built styles. Simply include the JS files into your webpage and setup the offset distance from the top. Then after a visitor scrolls beyond this limit a small fixed div will appear in the bottom corner. It is an excellent alternative to coding your own button from scratch.

Nod Frontend Validation

Nod is a frontend validation plugin for HTML input forms. Using jQuery you may setup the actual basis for what is considered good and bad data, then check these values after the user submits the form. It will not go through until all of the criteria are met.

Select2

Select dropdown menus have always been stuck in their own CSS styles. There are some posts online which delve into customizing your own select menu, but often not supported by all browsers. This jQuery plugin Select2 is an enhancement on the typical HTML select field. Just include the plugin within your heading and all select menus can be updated with a small bit of code.

Tooltipster

Aside from the other great jQuery tooltip plugin, I have to recommend Tooltipster for their alternative codebase. I have used Tooltipster in a few projects and it works just as described. Many of the options are so easy to implement, and this allows developers to customize their own tooltips with just a few CSS properties.

Vortex

This strange carousel-style plugin allows you to create a dynamic rotating panel of elements. The jQuery Vortex plugin is fairly new, and there are still updates being applied on a regular basis. However I think it is worth a mention since the techniques are still not as mainstream as you might expect.

iCheck

iCheck is one of the best jQuery plugins I have ever found to update your input fields. Checkboxes and radio buttons will receive a totally new look when you choose the proper skin and color style. I will admit that iCheck is a bit deceiving with so many confusing options at first. But the more you practice the easier it will get to include this plugin within your website(s).

Any List Scroller

ALS or Any List Scroller is a typical jQuery plugin for image slideshows. But instead of displaying the images in a bigger view, they are rotated like a typical homepage items scroll container. There are options to include arrows on both sides and allow visitors to manually switch between internal elements.

Tumbo

Tumbo is a fairly rudimentary plugin for quickly displaying a feed out of your Tumblr blog. This can be updated to display the contents from any Tumblr blog just by using the subdomain URL. Obviously not everybody will have a need for this, but it is good to know that developers are working their way through APIs like Tumblr built into JavaScript plugins.

Spectragram

Speaking of APIs – this Spectragram plugin is a quick method for accessing photos off Instagram. You simply include the JS files into your header and then specify a user or search query. The Spectragram plugin will pull all related results and link back to the original shot.

jQuery Stripe

The jQuery Stripe plugin offers a more traditional image gallery. Each photo will only display as a small vertical sliver which you may click to show the whole image. There are also arrows on the right and left sides to change between views. I don’t think it is the best option but it can be an offbeat solution for atypical website layouts.

SocialCount

SocialCount handles another strange feature which does get a lot of requests. This plugin will allow you to quickly pull out the numbers for Twitter, Facebook, and Google+ shares. Merely enter the target URL and you can display social media badges anywhere in your webpage.

Custom Scrollbar Plugin

jQuery Custom Scrollbar is a fascinating plugin which deserves a lot of attention. This has been online for quite a while now, but the effects still never cease to amaze. You can quickly make a div element with an overscroll feature using these custom scrollbars. It is perfect for handling custom content which should not take up the entirety of the layout.

Smallipop

Smallipop is yet another beautiful jQuery tooltips plugin. You should look at some of the examples to see how this would be implemented. Each tooltip plugin follows its own rules and they may or may not appeal to everyone. But I think Smallipop is a great choice for developers getting started in JavaScript libraries.

jPanelMenu

jPanelMenu is another popular jQuery plugin for using a sliding navigation. You may quickly include these codes within your website to add the effects on any page. Just target the open/close element and whenever the user clicks, it will display your hidden navigation. Take a peek at the live demo to see this effect in action.

Intro.js

Intro.js is an introduction guided tour plugin for jQuery. There are a lot of options and custom settings you may choose, but this also allows for a more unique website performance. I think Intro.js is the best jQuery plugin for creating a guided website tour. The CSS is easily malleable and you can demo with all sorts of different layouts.

Lightbox_me

The list of shadowboxes and lightboxes has grown tremendously since 2011. I think the jQuery plugin Lightbox_me is another beautiful example of this feature. You can setup images, forms, videos, and other HTML right within a modal lightbox. The JS codes are easy to learn and the plugin does not require a whole bunch of custom edits.

jQuery Carousel

I think the abitgone jQuery Carousel is definitely a peculiar option. This will display prev/next links right within the image div encapsulating all of the other images. It looks really nice in smaller spaces and you can resize the example to anything you need. I feel it is worth looking into but it may not come out as your favorite option.

Superbox

Are you familiar with how Google Images currently displays results? This is how jQuery Superbox works using your own static images. Visitors have the ability to browse thumbnails and once they click, a new div will open up displaying the full image. I really like this plugin because the user experience mimics Google very closely. And since people are already familiar with Google it provides a seamless exchange of data without much confusion.

KGallery

KGallery is another beautiful jQuery image gallery with slideshow features. The default icons are not permanent and you can obviously update other bits of the user interface. What really catches my attention is the option to include smaller image thumbnails within the gallery design. It is a fairly simple plugin to setup and I would recommend testing the live demo to see how you feel about the implementation.

jQuery Litelighter

Plenty of great syntax highlighters have been released over the past few years. But jQuery Litelighter is another plugin I really appreciate for the simplicity and graceful nature. You can generate highlighted syntax for nearly any popular language, and it should work using any of the most common web browsers.

bxSlider

bxSlider simply has one of the best user experiences for an image slideshow. You can implement this right onto your homepage or within any other page of the site. It will provide a solid design for users who are familiar with image slideshow features. Also the jQuery codes are very minimalist and do not bog down the website over long loading times.

MeanMenu

The MeanMenu plugin is a newer release and certainly worth looking into. I really like how the default navigation design will automatically resize based on the total number of internal links. Also you can include sub-menu links which offers visitors a quicker view of your nav menu. The design is not a great choice for everybody, however it is a solid plugin and may prove useful on some website projects.

20 New Essential jQuery Plugins

Latest jQuery Plugins and scripts for web designers and developers. Today I selected 20 essential jQuery plugins, sliders, image galleries, slideshow plugins, jQuery navigation menus, interactive maps, mobile interfaces , accordion menus, tooltips plugins and many other useful jQuery scripts collected in one place.

jQuery plugin are constantly being released, and it’s no surprise since it’s insanely popular, and for good reason. The only problem is being able to sort through them all to find the good ones. That’s why we’re always on the lookout, and we will found some good ones for you.

You may be interested in the following modern trends related articles as well.

• 25+ Latest jQuery Plugins
• 25 Excellent Free Fonts For Designers
• 36 Inspiring Examples Of Web Designs 2012
• 55 Remarkable Examples Of Typography Design

Please feel free to join us and you are always welcome to share your thoughts even if you have more reference links related to other tips and tricks that our readers may like.

Don’t forget to  subscribe to our RSS-feed and  follow us on Twitter — for recent updates and follow me on Google+ 

20 New jQuery Plugins

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. (via jquery.com)

jQuery Lightweight Tooltip Plugin :Tooltipster

Tooltipster is a lightweight jQuery plugin that enables you to easily create clean, HTML5 validated tooltips. The plugin is small-in-size (4.8kb minified), works fast and can be customized with ease.

Its look can be changed with CSS (theme support) and the position of the arrow, following the mouse, delay/period of the appearance can all be defined.

Website: http://calebjacob.com/tooltipster/

RoyalSlider – Professional Image Gallery and Responsive Content jQuery Slider Plugin

Royal Slider is a professional touch-enabled jQuery plugin for displaying any HTML content (images, videos, text..) inside a slider interface and comes with awesome features.

The slider focuses on providing great user experience on every desktop and mobile device.

The slider is very customizable with 50+ options, 4 skins with PSD files, 9 pre-built templates (and more coming) and full CSS styling.

Compatibility: All Modern Browsers
Website: http://dimsemenov.com/plugins/royal-slider/
Demo: http://dimsemenov.com/plugins/royal-slider/templates/

Cross-Browser JavaScript Drag & Drop File Uploader: FileDrop

FileDrop is a JavaScript cross-browser class for quickly creating drag & drop and AJAX (multiple) file uploader interfaces.

The class doesn’t require any JavaScript frameworks and works cross-browser, including IE6 (with iFrame fallback).

Compatibility: All Modern Browsers
Website: http://proger.i-forge.net/FileDrop_%E2%80%93_cross-browser_JavaScript_Drag_-amp_Drop_file_upload/7CC

Really Simple Slideshow: A Flexible Larger Slider jQuery Plugin

Really Simple Slideshow is a flexible jQuery plugin for creating image sliders of any kind. Images are loaded dynamically as each one is required, allowing for larger slideshows without having to pre-load lots of images.

The plugin converts any list of images into a slideshow, it can display captions with each slide, include links and there are multiple transition effects.

Compatibility: All Modern Browsers
Website: http://reallysimpleworks.com/slideshow/
Download:https://github.com/reallysimple/Really-Simple-Slideshow

Responsive jQuery Slider: iView Slider

iView Slider is a responsive jQuery image slider plugin with animated captions, for featuring any type of content (images, HTML, video). Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

The plugin has support for responsive layouts down to mobile and it works well with touch interfaces.

Slider has 35 built-in transition effects which is completely compatible with all major browsers (including ie6 to ie9, Firefox, Chrome, Opera, Safari) and mobile platforms like iOS / Android.

Requirements: jQuery & Raphael
Website: http://iprodev.com/2012/07/iview/
Demo:http://iprodev.com/iview/

Lightweight Framework For Mobile Web Apps: Sidetap

Sidetap is a lightweight framework for mobile web apps (2kb minified, gzipped).

The framework actually focuses on providing a flexible side-navigation similar to the one we know from Facebook’s mobile app, and, once the navigation part is solved, it is pretty easy to build a simple mobile web app.

Lightweight Sidetap only weighs 2k when minifyied and gzipped!

Device Support Sidetap aims to always deliver the best possible experience for all devices by starting with a basic experience and progressively enhancing it for more capable devices.

Less Decisions to Make By embracing convention over configuration, Sidetap lets you start building your mobile interfaces right away.

Simple Sidetap provides a flexible foundation for navigating between content panels on mobile devices using an easy-to-use syntax.

Requirements: jQuery or Zepto.js
Compatibility: All Modern Browsers
Website: http://sidetap.it/
Demo:http://sidetap.it/demo/stonehenge/index.html
Download:https://github.com/harvesthq/Sidetap

Javascript Slideshow For Flickr Images :Flickrshow

Flickrshow is a simple JavaScript slideshow for Flickr images.

The JavaScript slideshow doesn’t require any development expertise but, if jQuery is detected, it can function like any other jQuery plugin.

It has the ability to display images of a specific user, set, group, gallery and/or tags.

The number of images to be shown “per page”, autoplay being on/off, user control being on/off and the interval between each item can all be defined.

Website: http://www.flickrshow.co.uk/
Download: https://github.com/beseku/javascript.flickrshow

HTML Generator for jQuery Mobile Framework: jqmPhp

jqmPhp is an open source HTML code generator for jQuery mobile framework, the project that aims to simplify using jQuery Mobile with PHP.

jqmPhp is a package of PHP classes that facilitates the creation HTML files for use with jQuery Mobile Framework. All classes in the jqmPhp package can be converted to string and printed with an echo function.

Website: http://www.jqmphp.com/
Download: http://code.google.com/p/jqmphp/downloads/list

UI Notifications Framework: Backbone.Notifier

Backbone.Notifier is a powerful UI notifications framework for displaying and controlling UI notifications.

It is built on top of jQuery, Backbone.js + Underscore.js and has many cool features like a 3D module or animations support.

The notifications can be displayed on the top or in the middle, modal notifications exist and it is possible to set custom styles via CSS + JS API.

Requirements: jQuery, Backbone.js and Underscore.js
Compatibility: All Major Browsers
Website: http://e-w.co.il/backbone.notifier/
Download: https://github.com/ewebdev/backbone.notifier/

Easiest Google Maps Integration With GMaps.js

GMaps.js, is a jQuery plugin, allows Google Maps integration in a easiest way. Google Maps, like any other Google product is already easy-to-use and their API is not that complicated to work with.

Besides adding a standard map of a specific location, we can define the zoom level, add markers, get the location of a user (HTML5 geolocation), define routes, draw polylines and more with only few lines of code.

Requirements: jQuery
Website: http://hpneo.github.com/gmaps/
Demo:http://hpneo.github.com/gmaps/examples.html
Download:https://github.com/HPNeo/gmaps

Chronoline.js : JavaScript Library For Display Graphical Timeline Of Events

Chronoline.js is a JavaScript library for creating a chronological graphical timeline of events.

The timeline is is displayed horizontally, list of dates and events, it can generate a graphical representation of schedules, historical events, deadlines, and events placed on it can be any days long and details about the events are shown in a tooltip when hovered.

Requirements: Raphael.js, jQuery, jQuery qTip2 plugin
Compatibility: All Modern Browsers
Website: http://stoicloofah.github.com/chronoline.js/

JavaScript WYSIWYG Editor With Drag ‘n’ Drop : Redactor

Redactor is a free JavaScript WYSIWYG editor with drag ‘n’ drop images and files on the web. Redactor powered by jQuery its have clear interface.

It auto-converts textarea fields into an editor and the editor is capable of all the major actions (text-styling, adding image/file/video/tables/lists).

Compatibility: All Modern Browsers
Website: http://redactorjs.com/
Demo: http://redactorjs.com/examples/

Awesome Scrolling Effects jQuery Plugin: SuperScrollorama

I m sure you not forget the previous version “Scrollorama“, the popular jQuery plugin creating scrolling effects in scrolling of web pages.

There is now a superior version named SuperScrollorama by the same developer which offers more and complicated animations.

It makes use of the feature-rich TweenMax and the Greensock Tweening Engine (make sure you check its license before using) for accomplishing the effects.

Compatibility: All Modern Browsers
Website: http://johnpolacek.github.com/superscrollorama/
Download:https://github.com/johnpolacek/superscrollorama

Drop Down Menus With Images jQuery Plugin :ddSlick

ddSlick, a free lightweight jQuery plugin for creating drop down menus (list menus) with images and description, list-menus with a better look and more information.

It works as a drop-down menu where we can use images and description besides a simple text.

Compatibility: All Modern Browsers
Website: http://designwithpc.com/Plugins/ddSlick

Awesome jQuery Calendar :jQuery Verbose Calendar

jQuery Verbose Calendar is an awesome jquery plugin created by John Patrick Given (software developer & interface designer), The jQuery plugin creating a calendar that shows the whole months and days of a year at the same time and you can also change month and year.

When its loaded, it auto-scrolls to “today date” and displays the day names when hovered to any date in a tooltip.

Requirements jQuery + Tipsy & jQuery.ScrollTo plugins
Compatibility All Major Browsers
Website: http://iamjpg.github.com/jQuery-Verbose-Calendar/
Download; https://github.com/iamjpg/jQuery-Verbose-Calendar

Vector Maps With jQuery, Vector Graphic Maps for Modern Browsers :JQVMAP

JQVMap is a jQuery plugin for render vector graphic maps by using SVG for modern browsers and VML for the rest.

It is a heavily modified version of another plugin, jVectorMap, and comes withready-to-use maps of “world, USA, Europe and Germany”.

There are several customization options for beautifying the maps including colors, borders or their opacity.

Maps can have zooming enabled or not, show tooltips of data when hovered and there is callback for clicks.

Compatibility: All Modern Browsers
Website: http://jqvmap.com/
Download: https://github.com/manifestinteractive/jqvmap

jCS Media Library (jCSML) For Creating Cross-Browser Animation

jCS Media Library (jCSML) is powered by jQuery and it is specifically designed for creating cross-browser animation and be able to run them everywhere without having to tweak anything for individual browsers or platforms.

jCSML create flash-quality animations can be built that will run from IE7 all the way to the iPad/iPhone without changing a single line of code. It can produce highly effective animations using the jCSML scripting construct. The animations can also be easily packaged up and sold like .SWF files.

JCSML works everywhere like IE7 browsers, android Or an iPad/iPhone.

Requirement: jQuery & jQuery easing library
Compatibility: All Major Browsers
Website: http://jcsml.com/
Demo: http://jcsml.com/pageshell.html?root=Tutorials&target=Starship#
Download: http://www.jcsml.com/pageshell.html?root=PurchasePages&target=PurchasePage&TOCEnabled=FALSE

minjs: Lightweight JavaScript Components

minjs is a collection of independent JavaScript components, built on jQuery, that aims to accomplish a specific job with lightweight code.

minjs stays out of your way. It does not dictate how you to design your UI. It tries to make no assumptions about the layout of the HTML or CSS it’s running in.

Currently, there are 3 components: minform, longtable and dtcal.

minform brings cross-browser compatibility to HTML5 form enhancements(for attributes: placeholder, required and autofocus).

Compatibility: All Major Browsers
Website: http://www.minjs.com/

Real Shadow: jQuery Plugin For Mouse-Sensitive & Realistic Shadows

Real Shadow is a simple-yet-effective jQuery plugin for mouse-sensitive & creating realistic shadow effects for any HTML element.

With a simple function, it works by targeting any number of elements and manipulating the value of box-shadow CSS property for the elements in accordance with the mouse position.

So, the shadow’s location and size is determined by the element’s distance to the mouse pointer which ends up in a cool effect.

Compatibility: All Modern Browsers
Website: http://indamix.github.com/real-shadow/
Download: https://github.com/Indamix/real-shadow/

MiniJs: A Suite Of jQuery Plugins Written In CoffeeScript

Matthieu Aussaguel a web developer working at Envoto, releasing MiniJs plugins.

MiniJs is a free and open source suite of jQuery plugins that are written in CoffeeScript.

The plugins are perfect for everyday-use and include: slider, tooltip, notification, Twitter feed and counter (new ones are on the way).

They are all built with simplicity in mind and very easy-to-use with only few important parameters.

Compatibility: All Major Browsers
Website: http://minijs.com/
Download: https://github.com/minijs

jPages: Awesome JavaScript Pagination Plugin

jPages is a client-side JavaScript pagination plugin (jQuery plugin) with have lots of features like keyboard + scroll navigation, auto page turn, delayed display and a customizable navigation panel and also integration with Animate.css and Lazy Load.

The plugin is very unobtrusive and it won’t apply any extra styles to the items you are paginating. It will only create and insert the links inside the element(s) you are applying the plugin to, in order to turn them into navigation panel(s).

Any number of pagination elements can be inserted into the same page and they can be positioned with ease.

Compatibility: All Major Browsers
Website: http://luis-almeida.github.com/jPages/
Demo: http://luis-almeida.github.com/jPages/defaults.html
Download: https://github.com/luis-almeida/jPages

10 Responsive jQuery Slider Plugins

슬라이드 플러그인

http://designreflect.com/responsive-jquery-slider-plugins/

Sliders are common on blogs for a long time. But now sliders can be seen on any type of website. With the trend of responsive web design, you also need to make slider of your website or blog responsive so that it also adapts itself according to the resolution of the screen.

Its not that much difficult to make a website responsive but its always better to make use of scripts written by other developers to save your time. To help you out with responsive sliders, I have hand picked 10 best responsive jQuery slider plugins available on internet.

10 Responsive jQuery Slider Plugins

Flexslider

Flexslider is the most widely used and fully responsive jQuery slider. Flexslider is easy to use and is supported in all major browsers.

Flexslider

WOW Slider

WOW Slider is a responsive jQuery image slider with stunning visual effects and tons of professionally made templates.

WOW Slider

ResponsiveSlides.js – Responsive jQuery Slider

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up.

ResponsiveSlides.js

wmuSlider – A jQuery responsive slider

wmuSlider

CSS3 Slideshow with Parallax Effect

CSS3 Slideshow with Parallax Effect

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Blueberry

Camera Slideshow

Camera Slideshow

Elastic Image Slideshow

Elastic image slideshow is a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and you can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

Elastic Image Slideshow

Fullscreen Slit Slider

Fullscreen Slit Slider

UnoSlider

UnoSlider is an advanced image and content slider which is built with responsive design and mobile devices in mind.

UnoSlider

핀트레스트 같은 효과?!  욱마트 wookmark.com

http://www.wookmark.com/jquery-plugin

loopedSlider

loopedSlider 0.5.7 – No longer in development

Check out the next version of loopedSlider, now called Slides https://github.com/nathansearles/Slides

loopedSlider is a plugin made for jQuery that solves a simple problem, the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewind” that most other content sliders suffer from.

Info

Check out the next version of loopedSlider, now called Slides http://slidesjs.com

Developed by Nathan Searles, http://nathansearles.com

Complete instructions can be found at http://nathansearles.com/plugin/loopedslider/

For updates, follow Nathan Searles on Twitter

Examples

• Simple example using images, DIVs and auto generated pagination
• Simple text and auto height example using LIs
• Multiple sliders and auto play with auto restart
• Styled example

Markup

<div id="loopedSlider">
	<div class="container">
	        <div class="slides">
	                <div><img src="01.jpg" alt="" /></div>
	                <div><img src="02.jpg" alt="" /></div>
	                <div><img src="03.jpg" alt="" /></div>
	                <div><img src="04.jpg" alt="" /></div>
	        </div>
	</div>
	<a href="#" class="previous">previous</a>
	<a href="#" class="next">next</a>
</div>

CSS

.container { width:500px; height:375px; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:500px; display:none; }

Initialize

<script type="text/javascript" charset="utf-8">
        $(function(){
                $('#loopedSlider').loopedSlider();
        });
</script>

Defaults

container: ".container", //Class/id of main container. You can use "#container" for an id.
slides: ".slides", //Class/id of slide container. You can use "#slides" for an id.
pagination: "pagination", //Class name of parent ul for numbered links. Don't add a "." here.
containerClick: true, //Click slider to goto next slide? true/false
autoStart: 0, //Set to positive number for true. This number will be the time between transitions.
restart: 0, //Set to positive number for true. Sets time until autoStart is restarted.
hoverPause: false, //Set to true to pause on hover, if autoStart is also true
slidespeed: 300, //Speed of slide animation, 1000 = 1second.
fadespeed: 200, //Speed of fade animation, 1000 = 1second.
autoHeight: 0, //Set to positive number for true. This number will be the speed of the animation.
addPagination: false //Add pagination links based on content? true/false

Defining Local Defaults

<script type="text/javascript" charset="utf-8">
        $(function(){
			$('#loopedSlider').loopedSlider({
				addPagination: true,
				slidespeed: 500
			});
        });
</script>

Defining Global Defaults

<script type="text/javascript" charset="utf-8">
        $(function(){
			$.fn.loopedSlider.defaults.addPagination = true;
			$.fn.loopedSlider.defaults.slidespeed = 500;
        });
</script>