Best jQuery Slider Plugins & Tutorials with Demo

    Responsive Slideshow Photo Gallery Grid with Html5

    January 16, 2013 | Core Java Script, CSS2 / CSS3.0, HTML5, Plugins, Popup Window, Premium, Responsive, Slider
    Responsive Slideshow Photo Gallery Grid with Html5

    The Responsive Slideshow Photo Gallery has a fluid / flexible / responsive layout. Basically the grid is added into a html page into a div of your chosing and it’s adapting based of that div’s width, the grid height is modified based on the number of thumbnails and if other elements are below the grid div they will be pushed down automatically (document flow). In the examples provided you can see a few ways in which you might use this grid, of course that other configurations are possible.

    Pure OOP JavaScript code, no usage of jQuery or other libraries, in this way there will be no incompatibilities with HTML pages that might be using jQuery or other JavaScript libraries.

    The Responsive Slideshow Photo Gallery is using the GPU (hardware acceleration) using HTML5 standards. The rendering speed and performance is impeccable on desktop computers and most importantly on mobile devices, the way it works it will try to use CSS3 and if this is not available it will down fall to CSS2 or CSS1 for older browsers like IE7 and IE8.

    Read More Demo

    jQuery Simple Unobtrusive Numerical Slider

    January 8, 2013 | Plugins, Slider
    jQuery Simple Unobtrusive Numerical Slider

    SimpleSlider is a jQuery plugin for turning your text inputs into draggable numerical sliders.It has no external dependencies other than jQuery, and you don’t need to write a single line of JavaScript to get it to work.

    Read More Demo

    Liquid Slider : jQuery Html5 Responsive Content Slider

    January 7, 2013 | CSS2 / CSS3.0, HTML5, Slider, Tabs
    Liquid Slider : jQuery Html5 Responsive Content Slider

    The Liquid Slider is a fully responsive, html5 content slider, which means it will work on your desktop as well as your mobile device. It’s fully adaptable to changing widths and orientation, so ahead and resize your browser to see it in action.

    Read More Demo

    jQuery HTML5 Fullscreen Slideshow

    January 4, 2013 | HTML5, Slider
    jQuery HTML5 Fullscreen Slideshow

    This jQuery plugin lets you create fullscreen galleries where the slides are shown on the entire screen using the fullscreen APIs provided by Firefox 10+ and Chrome 15+ (and possibly Safari 5.1+).

    In all other browsers it falls back to displaying the slideshow in the entire viewport.

    Read More Demo

    Create a Simple Multi-Item Slider in jQuery & CSS3

    January 3, 2013 | Animation, CSS2 / CSS3.0, Slider
    Create a Simple Multi-Item Slider in jQuery & CSS3

    In today’s tutorial we want to show you how to create a simple item slider with CSS animations and some jQuery. The idea was inspired by the Aplle product slider where several little items fly in with a bouncing animation. We wanted to translate this concept to a modern-looking alternative for a minimal online store design where the items represent different categories. Categories as use-case fit quite well because of the limited nature of this type of slider. For more items to be shown, this is certainly a far-from-optimal solution. If the amount of items is limited this might give an interesting little touch to the experience.

    Read More Demo

    Photobox: CSS3 image gallery jQuery plugin

    December 27, 2012 | CSS2 / CSS3.0, Gallery, Plugins, Popup Window, Slider
    Photobox: CSS3 image gallery jQuery plugin

    Photobox is a lightweight image gallery modal window script which uses CSS3 heavily for silky-smooth animations and transitions. The goal was to great an image gallery script that utilizes GPU rending instead is the 90% scripts out there which are using javascript to move things around the old fashioned way.

    Benefits:

    • Both the script & CSS are only 7k each (minified script, not gziped)
    • Uses silky-smooth, hardware accelerated, CSS3 transitions and animations (for better performance)
    • Pretty UI and easy UX
    • CSS3 preloader, tailored-made. The only image you need is the arrow.png (soon even not that)
    • Works also on IE9 and above, but clearly not as nice as in normal browsers
    • Uses event-delegation on all thumbnails events
    Read More Demo

    Slider Pagination Concept with jQuery UI Slider

    December 24, 2012 | jQuery UI, Slider
    Slider Pagination Concept with jQuery UI Slider

    An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.

    Read More Demo

    Swiper : jQuery Mobile touch slider with hardware accelerated transitions

    December 20, 2012 | Plugins, Slider
    Swiper : jQuery Mobile touch slider with hardware accelerated transitions

    Swiper – is the free and ultra lightweight mobile touch slider with hardware accelerated transitions (where supported) and amazing native behavior. It is intended to use in mobile websites, mobile web apps, and mobile native apps. Designed mostly for iOS, but also works on Android and latest Desktop browsers.

    Read More Demo

    GalleryView : Photo gallery jQuery plugins

    December 11, 2012 | Gallery, Plugins, Slider
    GalleryView : Photo gallery jQuery plugins

    Photo gallery jQuery plugins are everywhere you turn. Not a week goes by without some web design blog featuring a list of jQuery galleries, carousels, sliders and slideshows. GalleryView is my attempt to write a single plugin capable of creating a wide variety of gallery types.

    My goal with GalleryView is to provide an extensive set of options to the user. Not only will the user be able to adjust photo and thumbnail sizes, and transition speeds, but he will also have the ability to choose from a selection of element positions, transition styles and other features.

    Read More Demo

    StackSlider: A Fun 3D Image Slider with jQuery & CSS3

    December 6, 2012 | CSS2 / CSS3.0, Plugins, Slider
    StackSlider: A Fun 3D Image Slider with jQuery & CSS3

    StackSlider is a highly experimental jQuery image slider plugin that explores a different and fun viewing concept for thumbnails, utilizing CSS 3D transforms and perspective. The idea is to navigate through two piles of images where the transition resembles an item being lifted off from the top of the stack and moved/rotated to the center of the container to be viewed. The previously viewed image falls on the opposite stack.

    Read More Demo