General

You can use/change following options in the slider setup method. For example:

<script>
    jQuery(document).ready(function($) {
        $("#slider-wrapper").transitionSlider({
            // example of General slider options
            initialSlide: 0,
            shadow: 'off',
            grabCursor: true,
            stopOnLastSlide: false,
            overlay: 'rgba(201, 76, 76, 0.3)',
            parallax: 0.7,
            invertColorSelectors: '.header-menu',
            transitionEffect: "zoom",
            transitionDuration: 2000
        });
    });
</script>

Parameter

Type

Default

Description

initialSlide

number

0

Index number of initial slide.

shadow

string

"off"

Enables main slider shadow. Values: "off", "effect1", "effect2", "effect3", "effect4", "effect5", "effect6"

grabCursor

boolean

true

This option may a little improve desktop usability. If true, user will see the “grab” cursor when hover on Slider.

stopOnLastSlide

boolean

false

Enable this parameter and slider will be stopped when it reaches last slide.

showSlidesRandomOrder

boolean

false

If you enable this option, the slider will initialize the slides in random order.

overlay

string

parallax

number

Parallax factor (between 0 and 1). The closer the number is to 1 the stronger the parallax.

invertColorSelectors

string

CSS selector for Menu (used to change menu colors on slide change). Example: “.header-menu"

transitionEffect

string

"roll"

Global transition effect between slides, can be overridden in each slide. Values: "roll", "zoom", "powerzoom", "warp", "stretch", "brightness", "twirl"

transitionDuration

number

1000

Duration of transition between slides (in ms).

Last updated

Was this helpful?