100+ jQuery Slider Example: Jquery Plugin

Showing posts with label Jquery Plugin. Show all posts

Sunday, 19 June 2011

Shutter Effect Portfolio with jQuery and Canvas

We will be using 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.

Prototype UI-Carousel

Carousel are great to display a large set of data like images. The current version includes:

Static and Ajax content,
Works with fluid layout,
Vertical and Horizontal

jQuery Infinite Carousel Plugin 1.2 Released

What’s So Great About this Plugin?

Unlike most carousel plugins which stop when they get to the last image,
This one allows the show to go on infinitely without any user intervention.
If you have three images you want to display, after the third image has been
Displayed, the first image will be next. Through some clever JavaScript, images are shuffled around so that it appears as if the carousel is a true carousel and never ends.
Captions are optional.
Optional thumbnail controls which allow visitors to jump to any image in the carousel sequence.
Thumbnails can be styled via CSS.
It’s less than 14K (a minified/compressed version will be available shortly).
Reusable on multiple containers within the same page.
You can use CSS to add padding to the carousel area so that the previous and next images are hinted at (see demos below).

Step Carousel Viewer v1.9

Description: Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three "status" variables are here for that purpose. Some highlights of this script:

Contents for the Step Carousel Viewer can be defined either directly inline on the page or via Ajax and extracted from an external file instead.
Ability to specify whether panels should wrap after reaching the two ends, or stop at the first/last panel.
Panel persistence supported, so the last viewed panel can be remembered and recalled within the same browser session.
Ability for Carousel to auto rotate as dictated by the new parameter: autostep: {enable:true, moveby:1, pause:3000} During this mode, Carousel pauses onMouseover, resumes onMouseout, and clicking Carousel halts auto rotation altogether.
Option to specify two navigational images that's automatically positioned to the left and right of the Carousel Viewer to move the panels back and forth.
Ability to auto generate pagination images based on the total number of panels within a Carousel and positioned anywhere on the page. v1.8 feature
The contents of a Carousel can be updated on demand after the page has loaded with new contents from an external file. v1.8 feature

Creating a Wobbling 3D Carousel

We’ll be creating a carousel with the help of the 3d Engine we built in a previous post.

The idea is we’ll create a ring by plotting points in 3d space, then we’ll rotate it so it’s almost perpendicular to the viewer.

Because it’s not 100% flat, it will look like it’s wobbling up and down, giving your carousel a little more flavor.

jQuery Image Scale Carousel

It auto scales the images you put into it to the appropriate height and width keeping their aspect ratio in place.

When working with imagery online keeping the integrity of an images aspect ratio is as important as anything else.

This is what's so nice about this jQuery plug-in; you don't have to worry about all of your images being perfectly sized for this slider.

The jQuery Image Scale Carousel auto scales all of your images making implementation super simple.

jQuery.carouFredSel Plugin scroll one or multiple items simultaneously

jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction.

The carouFredSel-plugin was built using the jQuery-library.
It is dual licensed under the MIT and GPL licenses.

Saturday, 18 June 2011

jQuery Slider plugin (Safari Style)

jQuery Slider is easy to use and multifunctional jQuery plugin. Below you can find demos and documentation.

Lof JSliderNews 1.0 - Jquery 1.3 & Easing plugin

Base on the Jquery Framework and the Easing Plugin, The JSiderNews Plugin is a slideshow plugin that displaying images or type of content and support favious navigation to previous|next items.

Features:

In the list sliders, Each item is HTML content
Use arrows to next or prevour slider
Easy to Customize Navigation tabs dynamically (such us images of sliders, number of sliders) and items auto slide.
Auto-playing (optional feature, can start playing or stopped)
Allow indicate a item via its index to display in first.
Support the wheelup and wheeldown to previous|next item in the list
Support preload images before play a slideshow

Custom Content Slider with jQuery

This time, we are going to make a custom content slider. I implemented this in my recent project and I'm pretty happy about it. My colleague spiced it up a little bit with some nice buttons.

The way it works is quite simple, we will have a UL list with 3 buttons and each of the button has a link with a reference to the right panel. How it scroll to the correct panel? It uses jQuery scroll-To plugin.

Basically you just have to pass the ID of the panel to the scroll-To plugin, and it will sroll the content to the correct position.

100+ jQuery Slider Example

Labels