Best jQuery Slider Plugins & Tutorials with Demo

    A simple jQuery powered image slider

    A simple jQuery powered image slider

    This is another quick implementation of one of Orman Clark’s designs from Premium Pixels. As with the last previous slider I shared, this is based on malsup’s awesome Cycle jQuery plugin.

    Considering the apparent complexity of Orman’s design, this implementation came out relatively light-weight; I used sprites for the nav links and pager and we’re obviously using Google’s CDN to serve jQuery.

    Swipeshow : jQuery touch-enabled Slideshow

    Swipeshow : jQuery touch-enabled Slideshow

    The unassuming touch-enabled JavaScript slideshow.

    • Showcase anything. You’re not limited to images: any markup will do.
    • Touch-enabled. Swipe away on your iPad, iPhone, Android device, or anything touch-enabled.
    • Style-it-yourself. The default CSS has nothing in it except laying out your slides side-by-side. You’d be in charge of figuring out how to add borders or anything else you like.
    • Hardware-accelerated. Animations are done via CSS transitions, which will render smoothly on mobile devices. It will automatically fall back to frame-by-frame animation when transitions aren’t available.

    Lush : jQuery Content Slider with CSS3

    Lush : jQuery Content Slider with CSS3

    Lush is a flexible content slider. It uses CSS3 native transition and animations to get the best performance taking advantage of the modern browser features, without lose functionality in older browsers.
    It uses a semantic syntax to describe the animation timeline avoiding complex attributes and keywords.
    The animation system is completely extensible allowing to add more animations and transitions easily just like adding new CSS classes.

    Features:

    • Native animations
    • Fully Responsive
    • Crossbrowser
    • Natural syntax animation timeline
    • CSS3 3D animation
    • Extensible animation system
    • Flexslider compatible
    • Pages Slider (via iframe)
    • CSS skineable
    • Powerful API
    • 4 different shadow images included

    jQuery Scroll Content Presenter with CSS3

    jQuery Scroll Content Presenter with CSS3

    It is an extension that allows you to create an unique and beautiful style of navigation , showing the contents of your site through animations and colors to engage your visitors. Scroll Content Presenter builds the navigation menu for you based on the structure of your HTML.

    Features:

    • Vertical and horizontal navigation
    • Custmom scroll
    • Parallax animation
    • CSS3 transitions
    • Built using bootstrap
    • Generate navigation menu for you

    Flipping Circle Slideshow jQuery Plugin

    Flipping Circle Slideshow jQuery Plugin

    Today we want to share a simple and fun circular slideshow with you. It’s an experimental concept and the idea is to flip a circle in a specific angle depending on which spot of the circle we click. There are three different possibilities for each side: top, middle and bottom. For example, when clicking on the top right part of the image, the circle will flip in the associated angle, making it look as if we press down that part and reveal the next image that is on the back face of the circle.

    Amazing Slider : jQuery & WordPress Image Video Slider

    Amazing Slider : jQuery & WordPress Image Video Slider

    An easy-to-use Windows & Mac app for creating beautiful, professional, responsive jQuery Slider, YouTube Video Slider, WordPress Slider Plugin and Joomla Slideshow Module.Amazing Slider comes with awesome transition effects: Fade, Cross Fade, Slide, Slice, Blinds, 3D, 3D Horizontal, Blocks and Shuffle. Each effect can be further customised to meet your own needs. The pre-made and highly configurable skins can give your slider a professional and unique looking.

    Dynamic Slider : jQuery Flexible Slider Plugin

    Dynamic Slider : jQuery Flexible Slider Plugin

    Dynamic Slider is a flexible slider that allows the customization of all of its components giving the possibility to create a large number of different layouts and configurations. It is lightweight and easy to work with and customize. Some of the features of the slider include:

    • It offers 50 example layouts and using the available settings the user can customize the existing ones or create many more.
    • It offers 2 example themes and the possibility for the user to edit the existing ones or to create new ones.
    • It offers the possibility to slide through drag.
    • It offers the option to display the controls permanently or only on mouse hover.
    • It offers the possibility to turn on auto sliding and the option to pause it on mouse hover.
    • It has 48 different settings.
    • It can have more than 1000 possible layouts.
    • It can have more than 10 000 possible configurations.

    jQuery ViewMaster CSS3 Slideshow

    jQuery ViewMaster CSS3 Slideshow

    A jQuery CSS3 slideshow.This is a slideshow demo I put together to try out some jQuery manipulation of CSS3 rotation and translation. It’s based on the old ViewMaster toy.Use arrow keys or click any photo.

    PictureSlides : jQuery Slideshow Plugin

    PictureSlides : jQuery Slideshow Plugin

    PictureSlides is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, and with fading effects, if desired. It can be a stand-alone slideshow or have a complete image library look with thumbnails, navigation buttons etc

    Minimalistic Slideshow Gallery with jQuery

    Minimalistic Slideshow Gallery with jQuery

    In today’s tutorial we will create a simple and beautiful slideshow gallery with jQuery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.