jQuery Homepage Banner Slideshow / Product viewer

This file is appropriate for homepage banner, slideshow, product viewer, Gallery though you should use as an intro. All animations are customizable so it appropriate for any kind of banners. You should use any variety of layer on every slider. You’ll be able to place and spacing every layer simply utilizing knowledge attributes. In obtain file, 5 default samples can be found in separate html file.

It work effectively in all browser together with ipad, ios and Android Gadget

Nearly all choices can be found to customise this slider with out modifying the supply code

Contact display screen functionality for each desktop and Contact display screen machine

Use any kind of Div content material it might be a number of div, picture (together with clear picture format), video, youtube and swf (flash file)

Distinctive Options:

Straightforward to align , spacing and animation course for every picture and Textual content
Choice to decide on any kind of in/out animation course
Choice to set animation coming distance
Background sample transferring animation
Choice to set in/out time for every div
Choice to set slideshow delay time for every slide
Allow/Disable desktop Drag
Help limitless photos and Textual content on every slide

Dotted Button:

Three various kinds of dotted button with Subsequent and Earlier buttons design can be found
Place the navigation any the place utilizing Align and Spacing choice
Present/Conceal the dotted, Subsequent and Earlier buttons
Allow/Disable navigation auto cover

Thumbnails:

Choice to point out Thumbnails with subsequent and former button
Will be simply change the thumbnail width and top utilizing css
Thumbnail border shade, border dimension, thumbnail to thumbnail area are management by means of css file
Thumbnail is mechanically match to the banner width. You too can change the thumbnails view space
Thumbnail mouse over tint picture or management by means of css file, you may also use shade as an alternative of picture
Place the thumbnail wherever utilizing Align and Spacing choices
You’ll be able to present each dotted buttons and thumbnails

Different Options:

Slideshow pause when the consumer hit the banner in any other case it proceed to play
5 differing kinds of samples is accessible
Help all browsers
Cufon font assist
You’ll be able to animate something that you simply place contained in the div

In plug-in code you possibly can customise the slideshow utilizing under variables

jQuery(operate($){
    $('#jq_fmslideshow').fmslideshow({
        banner_width : "",    
        banner_height : "",

        image_sprite : "fmslideshow_assets/sprite.png",
        image_background : "",
        image_topShadow : "",
        image_bottomShadow : "",
        image_loader : "fmslideshow_assets/loader_img.png",

        background_fullScreen : false,
        background_move : false,
        background_moveDistance : 1250,    

        buttons_type : 0,
        buttons_autoHide : false,    
        buttons_align : "BC",
        buttons_spacing :"15,0",

        button_nextPrevious_type : 0,
        button_nextPrevious_autoHide : true,

        button_next_align : "RC",
        button_next_spacing : "20,0",
        button_previous_align : "LC",
        button_previous_spacing : "20,0",    

        dotButtons : false,
        button_next_previous : false,

        thumbnails_align : "BC",
        thumbnails_spacing : "-75,0",
        thumb_next_preious_width : 38,

        slideShow : false,
        slideShow_delayTime : 2,

        desktop_drag : true

        default_data_align : "LC",    
        default_data_spacing : "70,0",
        default_data_inOutDirection : "LR",
        default_data_inOutDistance : "60"    

    });
});

Pattern slideshow code

 <!--Slide 1 -->
<div>
    <img data-align="BL" data-spacing="0,50" data-inoutdirection="BB" data-inoutdistance="50" data-starttime="0" data-staytime="5" data-animationspeed="700" data-easein="easeOutQuart" data-easeout="easeOutSine" class="imgSty" src="photos/image2.png" alt="fmslideshow" />

    <div data-align="TR" data-spacing="70,0" data-inoutdirection="RL" data-starttime=".5" data-staytime="6" data-animationspeed="400" data-easein="easeInQuart" data-easeout="easeOutSine" class="divStyle">
        <span class="txtLarge">Customise Animation</span>
    </div>

     <div data-align="TR" data-spacing="20,0" data-inoutdirection="LR" class="divStyle" data-inoutdistance="60">
        <span class="txtMedium">In/Out Course - Alignment - Spacing</span>
    </div>
</div>

Full assist doc is included in obtain file

Replace on 10-06-2013: Minor bug fastened

Replace on 23-11-2012: IE10 bug fastened