100+ jQuery Slider Example: 2011

Sunday, 19 June 2011

Slideshow 2 Integration with Lightbox

Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website.

This page features some examples of how Slideshow might be used to enhance the presentation of images on your website. Please view the source of this page for usage information.

A simple slideshow with jquery

A simple slideshow-script, started onload or by link, the transition is fading, once started, the script runs nonstop.

Display

The script shows the given images in the selected DIV-container. It is started either automatically on page load or by the click on optional control-elements. On page load the script replaces the contents of the given DIV-container which gives you the opportunity to integrate a static picture or a notice (like: the slideshow requires JavaScript) thus providing a fallback for visitors with JavaScript disabled.

Functionality

The script works thinkable easy. The given pictures lie one upon the other in a DIV-container. The "one upon the other" is realized by the use of the z-index. Whilst sliding through the pictures the topmost picture is faded out and then - as in a pack of cards - put to the bottom of the deck. That´s all.

Supersized 3.0 – Full Screen Background & Slideshow jQuery Plugin

Features

Resize images to fill the entire browser window while maintaining proportional dimensions.
Fullscreen slideshow complete with transitions, navigation, captions, and preloading.
Integrate with existing sites or create your own portfolio gallery.

New in Supersized 3.0

Added scrolling – you can have your site on top of Supersized.
Increased performance for larger number of images.
Images are now loaded from an array.
Added thumbnail navigation.

Making a Flickr-powered Slideshow

Today we will be developing a jQuery plugin that will make it easy to create slideshows, product guides or presentations from your Flickr photo sets.

The plugin will be using Flickr’s APIs and YQL to fetch the photos in the sets, after which it will create the markup of the slideshow and listen for events.

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.

Skitter - Slideshow for anytime

Skitter - Slideshow for Anytime

More than 20 effects.
Photo description with alpha background.
Auto Slider.
Image url using html or XML..

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 Multimedia Portfolio

This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

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

With jQuery for Designer’s redesign I decided to add a scrolling carousel that worked in the same way the carousel worked on the Apple Mac ads page.

This tutorial will walk through the fundamentals of the effect and how to recreate it.

This is a reasonably advanced effect so we need to plan carefully what we’re trying to achieve:

Markup that works without JavaScript (done!)
Initialisation & capture the height and width of the first carousel item (required for calculations)
Create empty list items to pad to fill every page
Generate cloned items on the start and end of the list
Adjust the scroll left position to show the real first item
Create goto method that supports forward and backwards
Generate the next/prev links & bind goto calls

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.

Cloud Carousel - A 3d Carousel in Javascript

There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. To redress the balance in JavaScript's favour, I have created this jQuery carousel plugin.

There are some benefits to doing this kind of thing in JavaScript rather than Flash, not least of which is the ease of integration, small file size, SEO, and inherent degradability/accessibility. Not having another dev-tool in the workflow is another plus.

The carousel features realistic perspective. Many 3d carousels only apply perspective scaling to the size of the images, not their positions. This results in disproportionate gaps appearing between items as they shrink in the distance which looks odd.

Features

Works with most browsers (tested on IE6-IE9, Firefox (incl V4), Chrome, Opera, Safari).
Accurate 3d perspective.
Optional auto reflections - no need to modify your images or add server code.
Easy integration with basic valid HTML and a tiny bit of JavaScript.
Small 5Kb (minified) script..
Degrades gracefully with Javascript turned off.
Fully accessible with no CSS or text only browsers.
Works with other plugins, e.g. Slimbox, and preserves your links and mouse events.
Optional mouse wheel support as of version 1.0.2.
It's completely free.

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)

100+ jQuery Slider Example

Labels