Best jQuery Slider Plugins & Tutorials with Demo

    Carousel Photo slider with Php and jQuery

    Carousel Photo slider with Php and jQuery

    To continue with our experiment series, our designing and programming team joined forces to create an amazing carousel vintage photo slider with PHP and jQuery. This is definitely a nice photo slider to be applied in different websites so you can showcase your work in a more original way. This tutorial is going to cover the programming part of the carousel (stay close to find out the release time of the design part) so you can learn how we did this fancy photo slider and you can adapt it to your own projects.

    flipsnap.js : Snap scroll for touch device

    flipsnap.js : Snap scroll for touch device

    flipsnap.js is snap scroll for touch device.It supports :

    • iOS Safari (iOS4+)
    • Android Browser (Android 2.1+) (*1)
    • Android Firefox Mobile 9.0+
    • Android Opera Mobile 11.50+

    Responsive Slider jQuery Plugin : iView Slider

    Responsive Slider jQuery Plugin : iView Slider

    iView is easy to use jQuery image slider with animated captions, responsive layout and HTML Elements like (Video, iFrame) slider. Easily add unlimited number of slides and captions. Use it as image slider, image gallery, banner rotator, banner ads, or even presentation.

    This jQuery plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.

    This slider includes 35 transition effects which is completely configurable and compatible with all major browsers (including ie6 to ie9, Firefox, Chrome, Opera, Safari) and mobile platforms like iOS / Android.

    How to Create a Multi-Step Form Using RhinoSlider

    How to Create a Multi-Step Form Using jQuery RhinoSlider

    If you are using normal Sign Up forms and still require a lot of data from your users, a multi-step form is the best solution. So the form is broken into small sections and the user only sees one section at a time. Also, multi-step forms reduces the space you need on the page.

    In this tutorial I am going to show you how to make a multi-step Sign Up form using Rhinoslider. I think you would prefer seeing the demo first.In a multi-step form, once you complete the first step, the second step will be displayed and Step 1 will be hidden. Normally we use sliding effects in step transitions. So this a scenario where we can use a Slider differently from its default behavior of creating image slideshows.

    iosSlider – Touch Enabled jQuery Horizontal Slider Plugin

    iosSlider – Touch Enabled jQuery Horizontal Slider Plugin

    iosSlider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider, carousel, scrolling website banner, or image gallery.

    Features :

    • Hardware accelerated : using CSS3 for supported iOS, Android and WebKit browsers.
    • Responsive support : to work with the most dynamic desktop and mobile sites.
    • Tons of API callbacks : Tons of API callbacks.
    • Auto-sliding : Set your slider to automatically transition and pause on hover.
    • FF/Safari/Chrome/IE7+ : Full modern browser support for desktop.

     

    Portfolio Flipping Slider Using jQuery & CSS3

    Portfolio Flipping Slider Using jQuery & CSS3

    There are many ways on displaying our portfolio, one of them is using grid style with slider effect for pagination. In this tutorial I’m going to share about how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.

    The slider will change our portfolio images when it’s flipping, this flipping effect is triggered by user click on the pagination. So when user click a page each of our portfolio images will flipping 360 degree and when its animation near end the image will changed with new image.

    We will create four flipping effects that will be used for animation, there are : horizontal left direction, horizontal right direction, vertical top direction and vertical bottom direction. These effects will be randomly choosen when displaying the image.

    Evo Slider : jQuery slideshow & content slider plugin

    Evo Slider : jQuery slideshow & content slider plugin

    Evo Slider is a jQuery slider with slideshow, unlimited layout, CSS skinning and much more features. Evo Slider comes bundled with super awesome features designed to save you development time and give you the flexibility to use it in a variety of ways – whether you’re building anything from an image gallery, to a product tour and lots of things in-between.

    With Evo Slider you can easily create amazing photo galleries or html content slider. You can choose how to display your slider, in horizontal accordion, fading, or scrolling slider. With ton of features you can create unlimited layout of slider.

    Content Timeline – jQuery/HTML5/CSS3 plugin

    Content Timeline - jQuery/HTML5/CSS3 plugin

    Content timeline is powerful and lightweight jQuery/HTML5/CSS3 plugin, best for displaying date organized content. It is fully customizable, and easily implementable with any js script, video, flesh etc. Well structured code, and wide ranged API functions make it simple to get started and flexible for customization.

    Features:

    • 11 settings for customizing
    • Keyboard binded
    • 5 class events
    • Included easing effects
    • 7 embedded script control methods
    • Intuitive design
    • Fully flexible
    • Fully interactive timeline

    An HTML5 Slideshow w/ Canvas & jQuery

    An HTML5 Slideshow w/ Canvas & jQuery

    You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.

    All uses of canvas you’ve come so far are probably limited to games and other proof of concept demos. Today, however, we are doing something practical – we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

    With JavaScript, we are going to apply a special filter to every image in the slideshow. We will create a new version of the images, with higher contrast and more vivid colors, and store it in a canvas elements.

    jShowOff: a jQuery Content Rotator

    jShowOff: a jQuery Content Rotator

    jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.