Best jQuery Slider Plugins & Tutorials with Demo

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

Googleslides : jQuery plugin to display your Google Photos

Googleslides : jQuery plugin to display your Google Photos

A jQuery plugin to display your Google Photos.Any album you want to display with this plugin must be marked for ‘Public’ sharing from Google.

bgStretcher jQuery Background Resizer & Slideshow

bgStretcher jQuery Background Resizer & Slideshow

bgStretcher (Background Stretcher) is a jQuery plugin for stretching one or more images proportionally across an entire page or element. When multiple images are supplied, bgStretcher displays them in a configurable slideshow with advanced options. The plugin allows you to add a large image (or a set of images) to the background of your web page and will proportionally resize the image(s) to fill the entire window area.

Features:

  • Proportionally Resizes Background Images
  • Lightweight jQuery Plugin
  • Unobtrusive Script & Simple to Setup
  • Works with Any Screen Resolution
  • Compatible with All Modern Browsers
  • Easy to Integrate with Popular CMS’s
  • Support Single or Multiple Images
  • Advanced Slideshow Features
  • Control Speed and Duration
  • Multiple Transition Effects
  • Resize Animation Available
  • Over 20 Configuration Options