jQuery Image Slider Plugin With Cool Transitions Effects

Setup

Add the following code in the head section of your HTML document.

                            <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: ['diagonalShow', 'diagonalShowReverse', 'spiralDimension', 'spiralReverseDimension', 'diagonalFade', 'diagonalFadeReverse',

                                                'randomFade', 'randomDimensions', 'boxes', 'explode', 'explodeFancy', 'linearPeal', 'linearPealReverse', 'linearPealDimensions',

                                                'linearPealReverseDimensions' ],

                                        thumbnails: true,

                                        animationSpeed: 500,

                                        applyEffectsRandomly: false,

                                        navPlacement: 'inside',

                                        navAlwaysVisible: true,

                                        captionOpacity: '0.3'



                                });           

                          });