100+ jQuery Slider Example: Jquery Auto Slider

Showing posts with label Jquery Auto Slider. Show all posts

Sunday, 19 June 2011

iCarousel - Horizontal images slider

One of the most common problems a web developer usually face is related to continuously rotate a fragment of content.

It can be a presentation of headlines, small fragments of news or a list of thumbnails.

The nature of the thing being rotated doesn't matter too much here because all those kind of applications share always the same idea: Rotating.

This objective can be achieve in different ways like fading and scrolling. Well here is iCarousel becomes useful.

It's a one step forward trying to generalize all those types of widgets providing a rich presentation and making the task easy to be done.

Spotlight & Preview - Carousel

Illustrates how to spotlight the middle item in the carousel. Several techniques illustrated:

Highlight the middle item by switching between a style class 'non-spotlight' (all other visible items have this class) with the style class 'spotlight')
To accomplish the offset start (so that item 1 starts in the middle) set scrollBeforeAmount to 2 and scrollAfterAmount to 2. This will allow scrolling between -1 and 17, yet loads only happen from 1 to 15 (size). Also the firstVisible is set to -1.
The slight bounce is accomplished by setting the animationMethod to YAHOO.util.Easing.backBoth.
carousel.addItem() now allows a third parameter: itemClass that we initially set to 'non-spotlight'
When the user hits next or previous we turn off the spotlight (switching classes) for the previous middle (which is actually the previous firstVisible -- carousel.priorFirstVisible) and highlight the new one
Clicking on an image in the carousel will scroll to the item and show it in the preview.

Version 0.6.3 - 08/18/08

Upgraded demos to use YUI 2.5.2.
Removed extraneous includes for YUI library from demos.
Retested on all browsers.

jCarousel and Thickbox 3

Example of jCarousel working together with Thickbox 3.

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 Carousel

Options can be passed to the jquery.carousel method in the form of an associative array:

Direction determines the direction of the carousel (horizontal by default)
Loop, set to true, allows you to define a carousel that loops (false by default)
DispItems determines the number of items to display per step (default 1)
Pagination, set to true, allows you to display a paginated carousel. (false by default)
PaginationPosition (depends on pagination) determines the page position relative to the main slide container. (inside by default)
NextBtn sets the html needed to render the 'Next' button. ("Next" span by default)
PrevBtn sets the html needed to render the 'Previous' button. ("Previous" span by default)
BtnsPosition determines the position of buttons relative to the main slide container. (inside by default)
NextBtnInsert (depends on btnsPosition) determines how the nextBtn element is inserted into the DOM. (appendTo par défaut)
PrevBtnInsert (depends on btnsPosition) determines how the prevBtn element is inserted into the DOM. (prependTo by default)
AutoSlide, set to true, allows you to automatically click the Next button at a given interval. (false by default)
AutoSlideInterval (depends on autoSlide) determines the delay between each click using the autoSlide option (3000 default)
DelayAutoSlide (depends on autoSlide) allows you to set a time delay between two co-existing carousels (0 default)
CombinedClasses, set to true, allows you to emulate multiple classes in IE6 (false by default)
Effect allows you to define animated effects that use jQuery to transition from one item in the carousel to the next (slide by default, effects integrated into jQuery - see the documentation).
SlideEasing (if: effect="slide"), enables the easing effect in the slide animation (swing by default, see the documentation for the plugin easing.js for combinations if necessary)
AnimSpeed (if: effect="slide") determines the speed of the animation when using slide. (normal by default)

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.

Pretty jQuery carousels Kirousel - Joomla! 1.5 plugin

Kirousel is a Joomla! 1.5 plugin which displays pretty JQuery carousels in article contents.

Features list
Kirousel has many options :

Root to every kirousels' folders
Scrolling effects
Horizontal
Vertical
Fading
Boucing
Diaporama
Loop
Pagination
Number of images to show for each time
Scroll delay for the diaporama effect
Ability to display many kirousels in the same article

By default, your kirousel will load defined parameters in the plugin configuration, but you can also specify different parameters for each of your kirousels by writing them directly in the tag.

Tiny Carousel with jquery

Tiny Carousel is a lightweight carousel for sliding html based content. It was built using the javascript jQuery library.

Tiny Carousel was designed to be a dynamic lightweight utility that gives webdesigners a powerfull way of enhancing a websites user interface.

Features

Can slide vertical or horizontal
Supports navigation by button or paging
The point where the carousel starts can be set
Animation time can be set in milliseconds or to 'instant'
Number of block to move at a time can be set
A interval can be set to slide automaticaly every given milliseconds
Easy customizable
Dual licensed under the MIT or GPL Version 2 licenses.
Lightweight its only 100 lines of code. mimified the size is 2,29 kb

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.

Carousel with wrap effect with jquery

This carousel actually wraps slides as they're bumped off the edges. That is, if a slide is bumped off the right edge, it reappears in equal measure from the left edge.

The 'on' slide is always centered, widened and given full opacity. The other slides huddle around it, narrower and semi-opaque.

An auto-rotator turns on each slide in turn, or you can force a slide on by clicking it (interrupting the auto-rotate).

Clicking the 'on' slide takes you to its corresponding URL, specified in the config file.

Photo Slider Tutorial with Jquery

Requirements

jquery
photoslider.js
photoslider.css
Very basic knowledge of html & javascript

Saturday, 18 June 2011

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

Make your own jQuery slider using XML

Just a few days ago I had to build a slideshow on a website I developed. However, I couldn't find a proper slider that would work exactly as I wanted it to.

The end result was that I coded a custom slider, and I am sharing the process with you. By the end of this article you'll be able to create a jQuery powered slider that uses XML to store information.

Why XML
I used XML because not all slides needed for the website contained vital information. Only the first slide contained critical information. I used XML because it allowed me to keep a clear and short source code that search engines would definitely like.

Progressive enhancement?
If javascript were turned off then the slider wouldn't work and it wouldn't load any content from the XML.

The slider's canvas would be left blank. To fix this issue the first slide of the presentation is also included inside the html source of the site and is replaced via javascript, if available.

Slider description
I needed the slideshow to be dynamic — support variable number of slides. I also wanted the slider to have numeric controls and no thumbnails or any other gizmos. I also wanted to have all sorts of html tags inside the slides, not just images or movies.

I also needed the slider to move forward on a given interval. And all these features were implemented, and you will be able to do the same by the end of this article.

Coin Slider - jQuery Image Slider with Unique Effects (Auto slide)

Features

Unique transition effects
Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
Valid markup
Flexible configuration
Auto slide
Navigation box
Lightweight (8kb only)
Linking images
Free to use under MIT licence
Fully customizable using CSS
Compatible with Android and iPhone

100+ jQuery Slider Example

Labels