Setting individual slide properties

When you set any of the slider's properties, they will apply globally, for all the slides, but you can override some of these global settings by setting specific values for each slide. This can be done for both HTML sliders and XML-driven sliders. The following properties can be set for individual slides: alignType, effectType, sliceEffectType, sliceDelay, sliceDuration, sliceEasing, horizontalSlices, verticalSlices, slicePattern, slicePoint, sliceStartPosition, sliceStartRatio, sliceFade, captionSize, captionPosition, captionShowEffectDuration, captionShowEffectEasing, captionHideEffectDuration, captionHideEffectEasing, captionShowEffect, captionHideEffect, captionLeft, captionTop, captionWidth, captionHeight, captionShowSlideDirection, captionHideSlideDirection, captionBackgroundColor, captionBackgroundOpacity, slideshowDelay, slideMask, slideDirection, slideDuration, slideEasing, slideLoop, fadeInDuration, fadeOutDuration, fadeInEasing, fadeOutEasing, fadePreviousSlide, fadePreviousSlideDuration, thumbnailType, captionDelay, htmlDuringTransition.

The above properties will be passed to the "slideProperties" object. For example, if you want to edit the 1st and 4th slide, you will do as you see in the code example below. You can see that first you indicate the index of the slide (note that enumeration starts from 0) and then to this index you pass an object that contains the settings.

<script type="text/javascript">
    $('#my-slider').advancedSlider({
        width:750,
        height:345,
        pauseSlideshowOnHover:true,
        slideProperties:{
            0:{effectType:'slice', horizontalSlices:'6', verticalSlices:'3'},
            3:{effectType:'fade', captionPosition:'top', captionSize:'40'}
        }
    });
</script>

For XML-driven sliders, you also have the option to specify the settings using attributes for each <slide> tag, as you can see in the following example.

<slider>	
    <slide effectType="slice" sliceEffectType="scale" horizontalSlices="6" verticalSlices="3">
        ...
    </slide>
    
<slide effectType="fade" captionPosition="bottom" captionSize="35"> ... </slide> </slider>
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk