Best jQuery Slider Plugins & Tutorials with Demo

Liquid Distortion Effects with JavaScript

Liquid Distortion Effects with JavaScript

Today we’d like to share an interesting distortion effect with you. The main concept of this demo is to use a displacement map in order to distort an underlying image, giving it different types of effects. To demonstrate the liquid-like transitions between images, we’ve created a slideshow.We’ll be using PixiJS as our renderer and filtering engine and GSAP for our animations.

nanameSlider : jQuery Skew Content Slider Plugin

nanameSlider : jQuery Skew Content Slider Plugin

nanameSlider is the free and simple skew content slider jQuery plugin.

  • Uses native CSS3 translate3d and skewY.
  • Slides can contain HTML content, or images
  • Fully responsive – adapt to any device
  • Mobile touch slider
  • Browser support: Firefox, Chrome, Safari, iOS, Android, IE11
  • Tons of configuration options

Herotabs : jQuery Tab Switcher Plugin

Herotabs : jQuery Tab Switcher Plugin

A tiny, fully accessible tab switcher for jQuery.Useful for standard tabs and also ‘hero’ style tabs often found at the top of websites to display content.

Thumbelina : jQuery Content Slider Plugin

Thumbelina : jQuery Content Slider Plugin

Thumbelina is a very lightweight content slider specifically designed for use with galleries of thumbnail images.

PIGNOSE Gallery : jQuery Slider Gallery Plugin

PIGNOSE Gallery : jQuery Slider Gallery Plugin

PIGNOSE Gallery is so simple and fast gallery style component.

rsSlideIt : jQuery 2D/3D Slideshow Transformations Plugin

rsSlideIt : jQuery 2D/3D Slideshow Transformations Plugin

Performs a smooth 2D/3D transition from one HTML element A to another element B.

Features:

  • Runs a single transition or a sequence of transitions;
  • Transition effect is automatically computed between two slides;
  • Fallbacks to browsers that do not support 3D transformations and CSS3 animations;
  • Highly customizable:
    • Any markup you want. Only restriction is sliders to be contained in a parent blocked element;
    • Strong event driven support;
    • Single transition or a sequence of transitions (movie mode);
    • Transition duration, easing function animation and zoom vertexes;
    • Optional user zoomming and panning between each transition.
  • Responsive design, suitable for any window sizes;

PIGNOSE : jQuery Parallax Slider Plugin

PIGNOSE : jQuery Parallax Slider Plugin

Pignose is a jQuery slider plugin that is supported “Parallax” effect.

jQuery Parallax Scroll Snap with Slider

jQuery Parallax Scroll Snap with Slider

Creates a parallax backgrounds effect for sections by snapping to them on mouse scroll.Ideal for one page sites. Easy to configure and setup.

Photoswipe/SlickJs Image Viewer with jQuery

Photoswipe/SlickJs Image Viewer with jQuery

jQuery extension for intergrating photoswipe with slick.

Simple 3D Coverflow with JavaScript & CSS

Simple 3D Coverflow with JavaScript & CSS

Simple 3D Coverflow is a fully 3D multimedia coverflow slider plugin that allows to display multimedia content with an unique original layout from a 3D perspective. It’s perfect for any kind of presentation, for anyone that wants to deliver a great impact to thier visitors.

  • Responsive / Fluid layout with autoscale function.
  • Mobile and desktop optimized.
  • Scroll and/or drag and swipe functions for the desktop and mobile devices.
  • Mouse Wheel support – navigation with mouse wheel scrolling.
  • Keyboard support – the left and right arrows can be used for navigation through the thumbnails.