Best jQuery Slider Plugins & Tutorials with Demo

Really Simple Slideshow in jQuery

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

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

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 : 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

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 : 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.

Carousel Photo slider with Php and jQuery

Carousel Photo slider with Php and jQuery

To continue with our experiment series, our designing and programming team joined forces to create an amazing carousel vintage photo slider with PHP and jQuery. This is definitely a nice photo slider to be applied in different websites so you can showcase your work in a more original way. This tutorial is going to cover the programming part of the carousel (stay close to find out the release time of the design part) so you can learn how we did this fancy photo slider and you can adapt it to your own projects.

flipsnap.js : Snap scroll for touch device

flipsnap.js : Snap scroll for touch device

flipsnap.js is snap scroll for touch device.It supports :

  • iOS Safari (iOS4+)
  • Android Browser (Android 2.1+) (*1)
  • Android Firefox Mobile 9.0+
  • Android Opera Mobile 11.50+

Responsive Slider jQuery Plugin : iView Slider

Responsive Slider jQuery Plugin : iView Slider

iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.

This slider includes 35 transition effects which is completely configurable and compatible with all major browsers (including ie6 to ie9, Firefox, Chrome, Opera, Safari) and mobile platforms like iOS / Android.

How to Create a Multi-Step Form Using RhinoSlider

How to Create a Multi-Step Form Using jQuery RhinoSlider

If you are using normal Sign Up forms and still require a lot of data from your users, a multi-step form is the best solution. So the form is broken into small sections and the user only sees one section at a time. Also, multi-step forms reduces the space you need on the page.

In this tutorial I am going to show you how to make a multi-step Sign Up form using Rhinoslider. I think you would prefer seeing the demo first.In a multi-step form, once you complete the first step, the second step will be displayed and Step 1 will be hidden. Normally we use sliding effects in step transitions. So this a scenario where we can use a Slider differently from its default behavior of creating image slideshows.