Best jQuery Slider Plugins & Tutorials with Demo

BookBlock: A Content Flip jQuery Plugin

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

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