Layer 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>

This set of parameters is related to layer container that holds all elements (text, button or image) for the current slide.

Parameter

Type

Default

Description

layerWidth

number

Width of layer container. (Value in px.)

layerHeight

number

Height of layer container. (Value in px.)

Last updated