The Most Awesome Image Slider

Quake Image Slider is a free open source jQuery plugin that lets you easily create powerful javascript slider with 40+ transition effects. Enhance your website by adding a unique and attractive slider!

This is a caption. You can put HTML here.
This is a caption. You can put HTML here.
This is a caption. You can put HTML here.
This is a caption. You can put HTML here.
This is a caption. You can put HTML here.

Setup

This example shows how captions can be configured to provide custom animations. See the captionsSetup below for customization options. Also, note that custom callback functions are used to customize captions behavior.



Add the following code in the head section of your HTML document to see the slider in action.

                            <link href="css/quake.slider.css" rel="stylesheet" type="text/css" />

                            <link href="skins/dark-room/quake.skin.css" rel="stylesheet" type="text/css"/>

                            <script src="js/quake.slider-min.js" type="text/javascript"></script>

                            $(document).ready(function () {

                                $('.quake-slider').quake({

                                         effects: ['slabs','blind', 'blindHorizontal', 'barsUp', 'barsDown', 'barsDownReverse',

                                                    'blindFade', 'fallingBlindFade', 'raisingBlindFade', 'mixBars', 'mixBarsFancy','blindFadeReverse', 'slideIn',

                                                    'slideInFancy', 'slideInReverse', 'chop', 'chopDimensions', 'chopDiagonal', 'chopDiagonalReverse' ],

                                        thumbnails: true,

                                        animationSpeed: 500,

                                        applyEffectsRandomly: false,

                                        navPlacement: 'outside',

                                        navAlwaysVisible: true,

                                        captionOpacity: '0.3',

                                        captionsSetup: [

                                                         {

                                                             "orientation": "top",

                                                             "slides": [0, 1],

                                                             "callback": captionAnimateCallback

                                                         },

                                                          {

                                                              "orientation": "left",

                                                              "slides": [2, 3],

                                                              "callback": captionAnimationCallback1

                                                          }

                                                          ,

                                                          {

                                                              "orientation": "bottom",

                                                              "slides": [4, 5],

                                                              "callback": captionAnimateCallback

                                                          }

                                                          ,

                                                          {

                                                              "orientation": "right",

                                                              "slides": [6, 7],

                                                              "callback": captionAnimationCallback1

                                                          }

                                                        ]



                                    });



                                    function captionAnimateCallback(captionWrapper, captionContainer, orientation) {

                                        captionWrapper.css({ left: '-990px' }).stop(true, true).animate({ left: 0 }, 500);

                                        captionContainer.css({ left: '-990px' }).stop(true, true).animate({ left: 0 }, 500);

                                    }

                                    function captionAnimationCallback1(captionWrapper, captionContainer, orientation) {

                                        captionWrapper.css({ top: '-330px' }).stop(true, true).animate({ top: 0 }, 500);

                                        captionContainer.css({ top: '-330px' }).stop(true, true).animate({ top: 0 }, 500);

                                    }



                                });           

                          });