Best jQuery Slider Plugins & Tutorials with Demo

    jQueryUI Limitslider

    jQueryUI Limitslider

    jQuery slider extension forcing gaps and order for any number of handles.A slider allowing multiple sliders and ranges with all sorts of optional limitations in position/size/distance. Also includes optional labels on the sliders and hover titles.

    Features:

    • Multiple sliders.
    • Multiple ranges.
    • Allows or blocks crossing of sliders.
    • Minimum distance between sliders.
    • Minimum/maximum position for all or individual sliders.
    • Label on the sliders.
    • Titles on sliders.
    • Use all of jQueryUI’s slider functionality.

    Ion.RangeSlider : jQuery Range Slider Plugin

    Ion.RangeSlider : jQuery Range Slider Plugin

    Ion.RangeSlider — Nice, comfortable and easily customizable jQuery range slider with skins support. Also support events and public methods, has flexible settings, can be completely altered with CSS.

    Features:

    • Slider supports negative and fractional values.
    • Ion.RangeSlider supports touch-devices (iPhone, iPad, etc.).
    • Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)

    jGallery : jQuery photo gallery with albums and preloader

    jGallery : jQuery photo gallery with albums and preloader

    FREE jQuery photo gallery with albums and preloader.

    Features:

    • 41 configuration parameters
    • 43 transition effects
    • Unlimited scalability
    • Use modern technology
    • Compatible with all major browsers
    • Retina friendly
    • FREE for commercial use

    Superslides : jQuery Full Screen & Hardware accelerated Slider

    Superslides : jQuery Full Screen & Hardware accelerated Slider

    Superslides is a full screen, hardware accelerated slider for jQuery. I wasn’t happy with the state of full screen sliders, so naturally I built my own.Superslides is compatible with the jQuery Animate Enhanced plugin. Simply include it before this plugin and it will automatically smooth out transitions using CSS instead of JavaScript.

    Glide.js : Responsive and touch-friendly jQuery slider

    Glide.js : Responsive and touch-friendly jQuery slider

    Glide is responsive and touch-friendly jQuery slider. Based on CSS3 transitions with fallback to older broswers. It’s simple, lightweight and fast. Designed to slide, no less, no more.

    Sliding Horizontal Layout with CSS3

    Sliding Horizontal Layout with CSS3

    Today we’d like to share an interesting layout with you. You might have seen it already on Skybox or on the website of Lotta Nieminen. It’s a layout where we see the main section in the middle and part of the previous and next section on the sides. The navigation reflects this view by showing the three items currently visible. When clicking on one of the sides or on one of the lateral navigation items, the sections will slide to the respective side, showing the next or previous section. The same happens to the navigation.

    We use CSS 3D Transforms for moving the lateral sections. In a browser that does not support 3D Transforms (or where JavaScript is not enabled),

    nanoGALLERY : jQuery Image Gallery Plugin

    nanoGALLERY : jQuery Image Gallery Plugin

    Image gallery for jQuery. Powerful and easy to use image gallery with support for pulling in Flickr and Picasa/Google+ photo albums as well. Mobile-friendly and responsive. Smooth in/out transitions. Images are shown as clickable thumbnails, which will expand to full view via a modal popup window. Support custom themes.

    Features:

    • Display image gallery
    • Easy to setup and customizable
    • Responsive layout – mobile friendly
    • Smooth in/out transition
    • Display image captions and descriptions
    • Breadcrumb for easy navigation in photo albums
    • Ignore undesired albums or photosets (by keyword blacklisting)
    • Multiple galleries on one page
    • Delivered with multiple themes – Support custom themes
    • Supported image sources :
      • list of images
      • Flickr account
      • Picasa/Google+ account

    Nex : jQuery Blazing Fast FullScreen Slider

    Nex : jQuery Blazing Fast FullScreen Slider

    Nex slider is a blazing fast fullscreen slider optimized for best performances and compatible with all platforms. It allows you to embed images, videos and even google maps in the same slider.

    It’s speed is based upon the fact that it is based on the Animo library which implements custom features from modern browsers like “requestAnimationFrame” and “Gpu Acceleration”.

    Features:

    • Customizable slider look
    • Optimized Speed
    • Touch Support
    • Keyboard Support
    • Pattern Support
    • SEO Friendly
    • 10 types of effects:
      1. Fade
      2. Slide from left
      3. Slide from right
      4. Slide from top
      5. Slide from bottom
      6. Zoom
      7. Skew
      8. Rotate
      9. Random
      10. None
    • 5 Predifined Color themes: amethyst, coral, sun, turquoise, and the default one
    • Support of image filters: brightness,contrast,grayscale,hue-rotate,saturate,sepia. (Note that they currently are working only under chrome, opera and safari)
    • Different Content types: image, video, map
    • Customizeable map style: ROADMAP, SATELLITE, HYBRID, TERRAIN
    • Customizable maps: zoom size, show infowindow, or hide it

    RTP.Slider.js: jQuery Touch Enable and Responsive Slider Plugin

    RTP.Slider.js: jQuery Touch Enable and Responsive Slider Plugin

    RTP.Slider.js is a versatile and flexible slider. Strong support for fluid / responsive Designs, mobile browsers and touch devices. It has nearly every feature that you can find in other sliders on the web.

    Features:

    • Carousel/Endless mode
    • Support for touch events
    • Simulated touch events via mouse
    • Support for fluid viewports
    • Also works in vertical mode
    • Various widgets and plugins
    • Autosliding with control widget
    • Extensible through plugin hooks
    • Custom animations for sliding
    • Experimental 3d carousel widget

    NACHO Lightbox : Flat responsive lightbox with jQuery

    NACHO Lightbox : Flat responsive lightbox with jQuery

    NACHO Lightbox is the perfect plugin for showcasing images, videos, iframes and even ajax in a modern and usable manner that is available on every device.

    Features:

    • Flat skin – perfect for modern websites
    • Responsive and beyond – very adaptable, perfect for desktop, tablet and even mobile. It hides the thumbnails on small screens to keep the media visible.
    • Touch gestures – mouse and touch are unified, so you can do anything using either one.
    • Blazing fast – Featuring some of the coolest CSS3 Effects out there, it takes advantage of the GPU on mobile devices.
    • Responsive Videos from Youtube and Vimeo.
    • Responsive fluid grid included to keep your images aligned.
    • Powerful events API – you can control all the options through this easy to use API. 
    • Retina Graphics – Sharper on every screen
    • Deep linking – So when someone shares your image will be taken directly to that image.
    • No coding required – Using only jQuery selectors and HTML5 data attributtes