50个免费的jQuery内容滑块教程

jopen 10年前

Parallax Slider With jQuery

We will make use of the parallax principle to move different backgrounds when we slide to an image in order to create some nice perspective.

Portfolio zoom Slider With jQuery

In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.

Animated Portfolio Gallery with jQuery

The gallery will contain a scroller for thumbnails and a content area where we will display details about the portfolio item

Tiny Circleslider

Tinycircleslider is a circular slider / carousel. That was built to provide webdevelopers with a cool but subtle alternative to all those standard carousels.

Slider Gallery with jQuery

This tutorial is about creating a creative gallery with a slider for the thumbnails. The idea is to have an expanding thumbnails area which opens once an album is chosen.

Beautiful Photo Stack Gallery with jQuery and CSS3

In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, we show the images of that album as a beautiful photo stack.

Pretty simple content slider with jQuery and CSS3

Create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description.

Pikachoose

It is a simple to use jQuery image gallery.

Galleria

Galleria is a JavaScript image gallery framework that simplifies the process of creating beautiful image galleries for the web and mobile devices.

HOW TO CREATE A SIMPLE MULTI-ITEM SLIDER

A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on the slide direction.

FlexSlider

An awesome, fully responsive jQuery slider toolkit. It is simple, semantic markup supported in all major browsers.

Bubble Slideshow Effect with jQuery

Building a jQuery-powered bubble animation effect. It will be a great way to present a set of images on your website as a interesting slideshow.

Coding a Rotating Image Slideshow w/ CSS3 and jQuery

jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.

An HTML5 Slideshow w/ Canvas & jQuery

we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

Making a Mosaic Slideshow With jQuery & CSS

We are making a jQuery & CSS mosaic gallery. Mosaic, because it will feature an interesting tile transition effect when moving from one slide to another.

Apple Slideshow Gallery

we are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases required.

RESPONSIVE IMAGE GALLERY WITH THUMBNAIL CAROUSEL

A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide.

FULL WIDTH IMAGE SLIDER

A very simple 100% width slider that scales down to mobile.

ELASTIC CONTENT SLIDER

A fluid content slider that will adjust in width and height depending on the size of its parent.

FULLSCREEN SLIT SLIDER WITH JQUERY AND CSS3

A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements.

WINDY: A PLUGIN FOR SWIFT CONTENT NAVIGATION

This jQuery plugin can be used to swiftly navigate content items. The effect will make the items fly away like a deck of cards caught in a tiny storm.

VERTICAL SHOWCASE SLIDER WITH JQUERY AND CSS TRANSITIONS

A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We’ll be using jQuery, CSS Transitions and media queries to make the layout adaptive.

TRIPLE PANEL IMAGE SLIDER

A tutorial about how to create a triple panel jQuery image slider with a 3D look and swipe-like transitions.

PARALLAX CONTENT SLIDER WITH CSS3 AND JQUERY

A simple parallax content slider with different animations for each slider element and a background parallax effect.

ELASTIC IMAGE SLIDESHOW

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

ROTATING IMAGE SLIDER WITH JQUERY

In the following tutorial we will 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.

3D WALL GALLERY

Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.