Element parameters

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

<script>
    jQuery(document).ready(function($) {
        $("#slider-wrapper").transitionSlider({
            slides: [
                {
                    src: "../assets/images/1.jpg",
                    layerWidth: 1500,
                    layerHeight: 950,
                    elements: [
                        {
                            type: "text",
                            content: "Content for text element.",
                            textColor: "#ffffff",
                            fontSize: "70px",
                            fontFamily: "Pacifico",
                            padding: "10px 100px 10px 100px",
                            backgroundColor: "rgba(0,0,0,0)",
                            position: {
                                x: "center",
                                y: "center",
                                offsetX: 0,
                                offsetY: 30
                            },
                            startAnimation: {
                                animation: "fadeInDown",
                                speed: 1000
                            },
                            endAnimation: {
                                animation: "fadeOutUp",
                                speed: 500,
                                delay: 500
                            },
                            hover: {
                                backgroundColor: "rgba(100,100,100,1)",
                                borderColor: "rgba(20,20,20,0)",
                                textColor: "#cccccc",
                                padding: "30px 30px 30px 30px"
                            }
                        }
                }
            ]
        );
    });
</script>

There are 6 types of layer elements:

Text
Heading
Image
Button
Video
iFrame

Below is a set of parameters for each type of element.

Text

Parameter

Type

Default

Description

type

string

"text"

Defines type of the element. (Value for text element is "text".)

htmlTag

string

"p"

Defines html tag of text element. (Default element tag paragraph).

content

string

Content of text element.

textColor

string

Font color of the text element. (Example: "#ffffff").

fontSize

number/string

Font size of the text element. If value is number then default unit is px. Also it’s possible to put size as string with any unit next to the number ("12pt"). All CSS units can be found here.

fontFamily

string

Font family of the text element. It’s possible to put any Google Font name (Example: "Pacifico"). All Google Fonts can be found here.

padding

string

Padding of the text element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

paddingTop

string

Padding top of the text element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)

paddingRight

string

Padding right of the text element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)

paddingBottom

string

Padding bottom of the text element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)

paddingLeft

string

Padding left of the text element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)

backgroundColor

string

Background color of the text element. Example format: "#FF0000"(more details here)

fontWeight

string

Font weight of the text element. Example format: "bold"(more details here)

lineHeight

string

Line height of the text element. Example format: "12px"(more details here)

textAlign

string

Text align of the text element. Example format: "center"(more details here)

borderWidth

number/string

Sets the width of an element’s four borders. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Example format: "2px"(more details here)

borderStyle

string

Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)

borderColor

string

Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)

borderRadius

number/string

Property defines the radius of the element’s corners. If parameter is number then default unit is in px. If value is string then value must contain units as well. This property can have from one to four values. Here are the rules: "15px 50px 30px 5px" (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner) (more details here).

width

number/string

Property defines the width of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".

height

number/string

Property defines the height of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".

customCSS

string

If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".

cssClass

string

Add your custom CSS class WITHOUT the dot, e.g: my-class. Add multiple classes separated with space, e.g: my-class my-class-2. Classes for slide navigation: slide-next, slide-prev. Classes for go to slide: slide-1, slide-2, ...

hover

object

false

Object with custom navigation parameters in the hover state. All CSS parameters can be added in this format (check list of all properties here), example: CSS property background-color should be backgroundColor. Check some of the properties we recommend below.

{

width

string

The width property sets the width of the text element. Example format: "150px"(more details here)

height

string

The height property sets the height of the text element. Example format: "50px"(more details here)

backgroundColor

string

Background color on the text element. Example format: "#FF0000"(more details here)

padding

string

Padding inside the text element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

border

string

Border around the text element. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)

borderRadius

string

This property allows you to add rounded corners to the text element. Example format: "25px". (more details here)

}

position

object

Object with position parameters of text element.

{

x

string

X or horizontal position of element. Three available values: "left", "center", "right".

y

string

Y or vertical position of element. Three available values: "top", "center", "bottom".

offsetX

number

This value can be a positive or negative number and defines how much offset is added to the text element from the current X position in px.

offsetY

number

This value can be a positive or negative number and defines how much offset is added to the text element from the current Y position in px.

}

startAnimation

object

Object with start animation parameters of text element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

endAnimation

object

Object with end animation parameters of text element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

Heading

Parameter

Type

Default

Description

type

string

"text"

Defines type of the element. (Value for heading element is "text".)

htmlTag

string

"h2"

Defines html tag of heading element. (Default element tag heading 2).

content

string

Content of heading element.

textColor

string

Font color of the heading element. (Example: "#ffffff").

fontSize

number/string

Font size of the heading element. If value is number then default unit is px. Also it’s possible to put size as string with any unit next to the number ("12pt"). All CSS units can be found here.

fontFamily

string

Font family of the heading element. It’s possible to put any Google Font name (Example: "Pacifico"). All Google Fonts can be found here.

padding

string

Padding of the heading element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

paddingTop

string

Padding top of the heading element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)

paddingRight

string

Padding right of the heading element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)

paddingBottom

string

Padding bottom of the heading element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)

paddingLeft

string

Padding left of the heading element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)

backgroundColor

string

Background color of the heading element. Example format: "#FF0000"(more details here)

fontWeight

string

Font weight of the heading element. Example format: "bold"(more details here)

lineHeight

string

Line height of the heading element. Example format: "12px"(more details here)

textAlign

string

Text align of the heading element. Example format: "center"(more details here)

borderWidth

number/string

borderStyle

string

Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)

borderColor

string

Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)

borderRadius

number/string

width

number/string

Property defines the width of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".

height

number/string

Property defines the height of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".

customCSS

string

If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".

cssClass

string

hover

object

false

{

width

string

The width property sets the width of the heading element. Example format: "150px"(more details here)

height

string

The height property sets the height of the heading element. Example format: "50px"(more details here)

backgroundColor

string

Background color on the heading element. Example format: "#FF0000"(more details here)

padding

string

Padding inside the heading element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

border

string

Border around the heading element. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)

borderRadius

string

This property allows you to add rounded corners to the heading element. Example format: "25px". (more details here)

}

position

object

Object with position parameters of heading element.

{

x

string

X or horizontal position of element. Three available values: "left", "center", "right".

y

string

Y or vertical position of element. Three available values: "top", "center", "bottom".

offsetX

number

This value can be a positive or negative number and defines how much offset is added to the heading element from the current X position in px

offsetY

number

This value can be a positive or negative number and defines how much offset is added to the heading element from the current Y position in px

}

startAnimation

object

Object with start animation parameters of heading element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

endAnimation

object

Object with end animation parameters of heading element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

Button

Parameter

Type

Default

Description

type

string

"button"

Defines type of the element. (Value for button element is "button".)

content

string

Content of button element.

url

string

URL of the button element. (Example: "https://example.com").

urlTarget

string

Open button link in new tab (value: "blank") or in same tab (value: "self")

textColor

string

Font color of the button element. (Example: "#ffffff").

fontSize

number/string

Font size of the button element. If value is number then default unit is px. Also it’s possible to put size as string with any unit next to the number ("12pt"). All CSS units can be found here.

fontFamily

string

Font family of the button element. It’s possible to put any Google Font name (Example: "Pacifico"). All Google Fonts can be found here.

padding

string

Padding of the button element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

paddingTop

string

Padding top of the button element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)

paddingRight

string

Padding right of the button element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)

paddingBottom

string

Padding bottom of the button element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)

paddingLeft

string

Padding left of the button element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)

backgroundColor

string

Background color of the button element. Example format: "#FF0000"(more details here)

fontWeight

string

Font weight of the button element. Example format: "bold"(more details here)

lineHeight

string

Line height of the button element. Example format: "12px"(more details here)

textAlign

string

Text align of the button element. Example format: "center"(more details here)

borderWidth

number/string

borderStyle

string

Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)

borderColor

string

Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)

borderRadius

number/string

width

number/string

Property defines the width of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".

height

number/string

Property defines the height of the element. If parameter is number then default unit is in px. If value is string then value must contain units as well. Example: "150px".

customCSS

string

If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".

cssClass

string

hover

object

false

{

width

string

The width property sets the width of the navigation button. Example format: "150px"(more details here)

height

string

The height property sets the height of the navigation button. Example format: "50px"(more details here)

backgroundColor

string

Background color on the navigation button. Example format: "#FF0000"(more details here)

padding

string

Padding inside the navigation button. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

border

string

Border around the navigation button. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)

borderRadius

string

This property allows you to add rounded corners to the navigation button. Example format: "25px"For “pill” style button put “50%” as value. (more details here)

}

position

object

Object with position parameters of button element.

{

x

string

X or horizontal position of element. Three available values: "left", "center", "right".

y

string

Y or vertical position of element. Three available values: "top", "center", "bottom".

offsetX

number

This value can be a positive or negative number and defines how much offset is added to the button element from the current X position in px.

offsetY

number

This value can be a positive or negative number and defines how much offset is added to the button element from the current Y position in px.

}

startAnimation

object

Object with start animation parameters of button element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

endAnimation

object

Object with end animation parameters of button element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

Image

Parameter

Type

Default

Description

type

string

"image"

Defines type of the element. (Value for image element is "image".)

src

string

Path to the image src. (Example: "https://example.com/image.jpg").

padding

string

Padding of the image element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

paddingTop

string

Padding top of the image element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)

paddingRight

string

Padding right of the image element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)

paddingBottom

string

Padding bottom of the image element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)

paddingLeft

string

Padding left of the image element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)

backgroundColor

string

Background color of the image element. Example format: "#FF0000"(more details here)

borderWidth

number/string

borderStyle

string

Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)

borderColor

string

Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)

borderRadius

number/string

size

number

Property defines the width of the element. Parameter is number unit is in px. Example: 150. Height of image is scaled with aspect ratio of the image.

customCSS

string

If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".

cssClass

string

hover

object

false

{

backgroundColor

string

Background color on the navigation image. Example format: "#FF0000"(more details here)

padding

string

Padding inside the navigation image. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

border

string

Border around the navigation image. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)

borderRadius

string

This property allows you to add rounded corners to the navigation image. Example format: "25px". (more details here)

}

position

object

Object with position parameters of image element.

{

x

string

X or horizontal position of element. Three available values: "left", "center", "right".

y

string

Y or vertical position of element. Three available values: "top", "center", "bottom".

offsetX

number

This value can be a positive or negative number and defines how much offset is added to the image element from the current X position in px.

offsetY

number

This value can be a positive or negative number and defines how much offset is added to the image element from the current Y position in px.

}

startAnimation

object

Object with start animation parameters of image element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

endAnimation

object

Object with end animation parameters of image element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

Video

Parameter

Type

Default

Description

type

string

"video"

Defines type of the element. (Value for video element is "video".)

src

string

Path to the video src. (Example: "https://example.com/video.mp4").

padding

string

Padding of the video element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

paddingTop

string

Padding top of the video element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)

paddingRight

string

Padding right of the video element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)

paddingBottom

string

Padding bottom of the video element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)

paddingLeft

string

Padding left of the video element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)

backgroundColor

string

Background color of the video element. Example format: "#FF0000"(more details here)

borderWidth

number/string

borderStyle

string

Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)

borderColor

string

Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)

borderRadius

number/string

size

number

Property defines the width of the element. Parameter is number unit is in px. Example: 150. Height of video is scaled with aspect ratio of the video.

customCSS

string

If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".

cssClass

string

hover

object

false

{

backgroundColor

string

Background color on the navigation video. Example format: "#FF0000"(more details here)

padding

string

Padding inside the navigation video. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

border

string

Border around the navigation video. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)

borderRadius

string

This property allows you to add rounded corners to the navigation video. Example format: "25px". (more details here)

}

position

object

Object with position parameters of video element.

{

x

string

X or horizontal position of element. Three available values: "left", "center", "right".

y

string

Y or vertical position of element. Three available values: "top", "center", "bottom".

offsetX

number

This value can be a positive or negative number and defines how much offset is added to the video element from the current X position in px.

offsetY

number

This value can be a positive or negative number and defines how much offset is added to the video element from the current Y position in px.

}

startAnimation

object

Object with start animation parameters of video element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

endAnimation

object

Object with end animation parameters of video element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

iFrame

Parameter

Type

Default

Description

type

string

"iframe"

Defines type of the element. (Value for iFrame element is "iframe".)

src

string

Path to the iFrame src. (Example: "https://example.com").

padding

string

Padding of the iFrame element. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

paddingTop

string

Padding top of the iFrame element. Example format: "20px"There are properties for setting the padding only for one side of an element (top). (more details here)

paddingRight

string

Padding right of the iFrame element. Example format: "20px"There are properties for setting the padding only for one side of an element (right). (more details here)

paddingBottom

string

Padding bottom of the iFrame element. Example format: "20px"There are properties for setting the padding only for one side of an element (bottom). (more details here)

paddingLeft

string

Padding left of the iFrame element. Example format: "20px"There are properties for setting the padding only for one side of an element (left). (more details here)

backgroundColor

string

Background color of the iFrame element. Example format: "#FF0000"(more details here)

borderWidth

number/string

borderStyle

string

Sets the style of an element’s four borders. This property can have from one to four values. Example format: "solid"(more details here)

borderColor

string

Sets the color of an element’s four borders. This property can have from one to four values. Example format: "#ff0000"(more details here)

borderRadius

number/string

size

number

Property defines the width of the element. Parameter is number unit is in px. Example: 150. Height of iFrame is scaled with aspect ratio of the video.

customCSS

string

If you miss any CSS property add it here. Example: "margin-top: 15px; opacity: 0.5;".

cssClass

string

hover

object

false

{

backgroundColor

string

Background color on the navigation iFrame. Example format: "#FF0000"(more details here)

padding

string

Padding inside the navigation iFrame. Example format: "20px 40px 20px 40px"There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)

border

string

Border around the navigation iFrame. Example format: "1px solid #FF0000"First is width of the border, next the style of the border and the color of the border. (more details here)

borderRadius

string

This property allows you to add rounded corners to the navigation iFrame. Example format: "25px". (more details here)

}

position

object

Object with position parameters of iFrame element.

{

x

string

X or horizontal position of element. Three available values: "left", "center", "right".

y

string

Y or vertical position of element. Three available values: "top", "center", "bottom".

offsetX

number

This value can be a positive or negative number and defines how much offset is added to the video element from the current X position in px

offsetY

number

This value can be a positive or negative number and defines how much offset is added to the video element from the current Y position in px

}

startAnimation

object

Object with start animation parameters of iFrame element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

endAnimation

object

Object with end animation parameters of iFrame element.

{

animation

string

Name of animation. A full list of the names and examples can be found here. (Example: "fadeInDown")

speed

number

Duration of selected animation. Speed is defined as number in ms.

delay

number

Delay in ms of animation start.

}

PreviousLayer parameters NextRunning things locally

Last updated 4 years ago

Was this helpful?