The idea behind this plug-in is to display a varying number of images in an attractive and easy to use manner. The inspiration for this plug-in this iTunes album viewer. The SlidingGallery plug-in will take a group of images and turn them into a cyclical gallery of images which the user can click through. One image will be centered on the screen, with two smaller images off to the sides. The user can click either of the smaller images to bring them to the center, or the center image to enlarge it. For optimal use, this plug-in should be applied to seven or more images, but can work with fewer (images will be duplicated in order to bring the total to seven).
Best jQuery Slider Plugins & Tutorials with Demo
BookBlock: A Content Flip jQuery Plugin
BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism.
We will be using jQuery++ by Bitovi which has some add-ons for jQuery (specifically, to add the swipe event).
Full Screen Responsive jQuery Image and Content Slider:RSlider
Image sliders add life and interactivity to your web contents. But creating an image slider from scratch is not that easy. You need some good programming skills to create your own slider. If you are not the programmer or you just don’t want to re-invent the wheel, RSlider is for you. Its a full screen responsive image and content slider powered by the fantastic javascript library jQuery. With a nice and simple design it adjusted automatically to the width of your browser screen.
Lemmon Slider : jQuery Carousel With Variable Elements Widths
Lemmon Slider is a jQuery-based carousel that supports slided elements with variable widths. It’s lightweight and very simple to use.
Features
- Can slide any kind of content ULs, OLs, DIVs, etc.
- Supports variable elements widths
- Sliding by one element or by a page
- Supports looping
- Supports infinity NEW (since v0.2)
- Tested in Firefox, Chrome, Safari, Opera, IE6+
Really Simple Slideshow in jQuery
Really Simple Slideshow is a jQuery plugin for creating image slideshows. Images are loaded dynamically as each one is required, allowing for larger slideshows without having to pre-load lots of images.
Flyout Image Slider Using jQuery & CSS3
In this post I’m going to share about how to create an experimental flyout image slider. This image slider is a stack of some images and works by flying out the selected image to the front of images stack. We will use CSS3 transition, animation and transform for this animation and jQuery for helping us maintain click event, CSS transition and animation.
This image slider doesn’t do slide on displaying image, as I described before it will be flying out the selected image to the front of images stack. So all images will be positioned stacked each other. When user click on of the image, it will be move to the outer left of image stack and move back with rotating effect to the stack and positioned on top of it.
Triple Panel Image Slider in jQuery & CSS3
In this tutorial we will create a jQuery triple panel image slider with a 3D look. The idea is to have a main panel and two lateral panels that are rotated slightly in 3D space. When navigating, we will slide in the respective next image in each panel. We’ll be using CSS 3D Transforms with perspective and CSS Transitions.
Spritespin : jQuery Plugin for Sprite Animation
Spritespin is a jQuery plugin that enables sprite animation in your website.
It takes an array of images or a stiched sprite sheet and is able to play these images frame by frame. This results in an animation. The aim of this plugin is to provide a 360 degree view of some kind of product. There is no flash needed. Everything is done with javascript and the jQuery framework.
Features:
- Animation using spritesheets or image arrays
- Plenty of option parameters
- Api interaction
- Simple mouse interaction
- Custom behavior tweaking
- Support for touch devices
- Easy to integrate
- No flash
nobtrusive Slider Control/HTML5 Input Range Polyfill
An Unobtrusive Accessible Slider script that can also be used as an HTML5 Input Range polyfill solution.
- The script can be used as an HTML5 input range polyfill solution
- Introduces a gradient filled “range bar” for quick visual feedback
- iOS Touch screen friendly
- Arrives with a new CSS3 skin that degrades gracefully in older browsers
- A small network footprint – only two HTTP requests and a total size (minified and gzipped) of about 11k
- Unobtrusive & namespace friendly
- Conforms to the WAI-ARIA defined role of “slider”
- Keyboard accessible
- Mousewheel compatible
- Responsive design friendly
Adaptor : jQuery 3D content slider
Adaptor is a light-weight content slider that aims to provide a simple interface for developers to create cool 2D or 3D slide animation transitions.Currently, It has only added 3D support for webkit and Firefox, all other browsers will fallback gracefully to a simple fade transition when using the 3D effects.
All 2D slide transitions have been tested in IE6+ and all other modern browsers.
