Best jQuery Slider Plugins & Tutorials with Demo

    Simple jQuery/CSS3 slider

    Simple jQuery/CSS3 slider

    Simple jQuery CSS3 slider. Simple to use and supports every browser! (IE7+)

    JsMorph : JavaScript Motion framework

    JsMorph : JavaScript Motion framework

    jsMorph is a morphing – motion – tweening framework that knows what you need to do… get going! It’s a nice ensemble of best timing, fast, smart and resource saving algorithms and convenience.

    jsMorph is a completely Cross-Browser, pure javaScript animation framework that can manipulate almost any and multiple stylings of multiple HTML elements. It auto detects start positions, auto converts units, automatically adjusts rendering speed and corrects time leaks for smoother rendering experience.

    Swiper 3D Flow plugin for Swiper

    Swiper 3D Flow plugin for Swiper

    3D Flow is the ultra small (1Kb minified and gzipped) and free plugin for iDangero.us Swiper that turns your great swiper slider (or app) into amazing realistic 3D gallery with dynamic shadows. It was inspired by iOS App Store homepage 3D slider.

    It works in all browser that support CSS3 3D Transforms.In browsers that do not support CSS3 3D transforms it will work and look like a usual Swiper.

    miSlider : jQuery Multi-Item Slider Plugin

    miSlider : jQuery Multi-Item Slider Plugin

    Multi-item Slider or miSlider is an open-source jQuery slider plugin specifically designed for displaying multiple images or slides of content. The slider can be configured to display one slide at a time, as many slides as possible or anything in between.

    Features:

    • Easy to use
    • Supports one or more slides on screen
    • Slides can be single images or complex HTML
    • Lightweight
    • Only requires jQuery core
    • Responsive – Can automatically calculate the number of slides that fit on screen
    • Easily customizable
    • Callbacks for slider events
    • Cross-Browser Support – Supports IE8+

    Create a Tiled Background Slideshow with CSS3

    Create a Tiled Background Slideshow with CSS3

    A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations.

    Arrow Navigation Styles with CSS & SVG

    Arrow Navigation Styles with CSS & SVG

    Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects.

    Liquid Slider : jQuery Responsive Content Slider

    Liquid Slider : jQuery Responsive Content Slider

    Liquid Slider is a responsive jQuery HTML content Slider.

    picoSlides : jQuery Plugin for SlideShare Presentations

    picoSlides : jQuery Plugin for SlideShare Presentations

    picoSlides is a jQuery plugin for directly embedding SlideShare presentations without using IFRAMEs. It leverages SlideShare’s oEmbed API to offer a responsive interface that enables optimal use of bandwidth and simple slide navigation.

    Features:

    • Adaptive slide images: fetches device-appropriate versions of images depending on the dimensions of the slideset container.
    • Lazy slide loading: the first slide image is used as a preview poster of the whole presentation, a la YouTube. The remaining slides are downloaded only if the user hits the ‘Next’ button.

    skippr : jQuery Super simple Slideshow plugin

    skippr : jQuery Super simple Slideshow plugin

    A super simple slideshow plugin for jQuery.

    jQuery Animate Slider

    jQuery Animate Slider

    A jQuery Slider plugin with specific animations effects for each element.The Animate Slider plugin uses some predefined animation classes (fadeIn,fadeOut,rotateIn,bounce,slideInRight etc.) found in jquey.animateSlider.css and adds them to each element on the slider. It also add classes with delay for each animation (delay1s,delay1-5s,delay2s etc.)