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
Was this helpful?