startval

startVal - Api & Options

Slider general options

Create a JavaScript object with some of the following attributes and put it as an argument in the slider's constructor!

Name Default Description

Multiple instances

No default value Add multiple sliders on the same page. It is a trick instead of an attribute! Try it yourself

width

Type: string (px or %)

"100%" Indicates the width of the slider. Initially, the slider has the 100% of witdh of html tag that contains it! Try it yourself

randomFront

Type: boolean

true True indicates that the first image that appears is the first image in the div-slider, false means that it is a randomly selected image. Try it yourself

timeEffect

Type: integer

300 Slide transition duration (in ms) Try it yourself

animation

Type: string

300 Animation type: Select one of the following animations:
'rotation', 'translation', 'vibration', 'zoom'
By default the animation is rotation! Try it yourself

overflowHidden

Type: boolean

true True means that the overflows of the images are hidden within the limits. If it is 'false' you will see the entire images out of bounds! Try it yourself

borderSize

Type: integer

1 Size of slider's border (in pixels). Initially it's 1! Try it yourself

borderColor

Type: String (rgb or html)

"#999" Color of slider's border (in pixels). Initially it's "#999" Try it yourself

borderRadius

Type: Integer

0 Rounded of slider's border (in pixels). Initially it's 0 (no border radius). Try it yourself

paddingSize

Type: Integer

6 Padding of slider (in pixels). Initially it's 6! Try it yourself

paddingColor

Type: string (rgb, rgba or html)

"#EEE" Color of slider's padding (rgb, rgba or html). Initially it's #EEE"! Try it yourself

boomerang

Type: boolean

true True means that the transitions of the images will have a boomerang effect. False indicates that the transitions are normal. Try it yourself

filter

Type: string

"off" Add one of the startVal filters or "off" if you do not want any filters!
Filters: 'white', 'black', 'green', 'blue', 'red', 'magenta', 'yellow', 'cyan', 'gray' Try it yourself

showPager

Type: boolean

true Adds the slider pager! Try it yourself

autoplay

Type: boolean

true Set it to true if you want the slide of images to be automatic, otherwise, set it to false! Try it yourself

autoplayInterval

Type: integer

6000 If you have been setted autoplay to true, then you can select the time that exists between image slides (milliseconds). Try it yourself

shadowSize

Type: integer

0 Slider box shadow. By default there is no shadow! Try it yourself

shadowColor

Type: string

"#666" Shadow color (in rgb or html). If you take a shadowSize > 0 in previous option, then you can choose the shadow color! Try it yourself

Slider buttons options

Use the object of the general options to embed an attribute called buttons, that is another JavaScript object and have the following attributes!

Name Default Description

type

Type: string

"big" The two type options for buttons are "big" and "small". Choose one! Try it yourself

hiddenEffect

Type: boolean

true True means that the buttons will be hidden during the transition time effect! Try it yourself

position

Type: string

"center" position Try it yourself

borderRadius

Type: integer

2 Just if you have selected type of buttons = "big", now you can select the rounded border size (in pixels). By default border-radius is 2! Try it yourself

dark

Type: boolean

false dark Try it yourself

noMargin

Type: boolean

true It indicates if there is a lateral margin buttons! By default there is a margin! Try it yourself

Slider caption options

Note that the caption only appear whether the img tag have data-caption attribute and it is filled with some text. There may be images with caption and images without caption!

Use the object of the general options to embed an attribute calledcaption, that is another JavaScript object and have the following attributes!

Name Default Description

animation

Type: string

"slide" The two type options for caption animation are "slide" and "fade". Choose one! Try it yourself

float

Type: string

"left" Indicates the horizontal caption position that just can be "left" or "right". Try it yourself

position

Type: string

"center" You can choose the place of slider where you want the caption to appear. Yo can choose between: "top" or "bottom". By default the slider caption will be appear on the bottom of the slider! Try it yourself

backgroundColor

Type: string

"rgba(0, 5, 10, 0.6)" Choose the background color of slider caption (in rgb, rgba or html). By default the background color is transparent black!

borderSize

Type: integer

0 Size of slider caption border (in pixels). Initially it's 0! Try it yourself

borderColor

Type: string

"#FFF" Color of slider caption border (in rgb or html). Initially it's "#FFF". Note that if borderSize is 0 then it's a redundant attribute! Try it yourself

borderRadius

Type: integer

0 Rounded of slider caption (in pixels). Initially it's 0! Try it yourself

fontColor

Type: string

"#FFF" Font color of slider caption border (in rgb or html). Initially it's "#FFF"! Try it yourself

fontSize

Type: string

25 Font size of slider caption border (in pixels). Initially it's 25! Try it yourself

fontBold

Type: boolean

false True indicates font-weight is bold, false means that font-weight is normal! Try it yourself

fontItalic

Type: boolean

false True indicates font-style is cursive, false means that font-style is normal! Try it yourself

shadowSize

Type: integer

0 shadowSize Try it yourself

shadowColor

Type: string

"#666" Color of slider caption shadow (in rgb or html). Initially it's "#FFF". Note that if shadowSize is 0 then it's an redundant attribute! Try it yourself

Slider pager options

Use the object of the general options to embed an attribute called pager, that is another JavaScript object and have the following attributes!

Name Default Description

float

Type: string

"left" Indicates the horizontal position of pager that just can be "center", "left" or "right". Try it yourself

position

Type: string

"center" You can choose the place of slider where you want the pager to appear. Yo can choose between: "top" or "bottom". By default the slider caption will be appear on the bottom of the slider! Try it yourself

transitionHidden

Type: boolean

true If this attribute is true, the pager will be hidden during the transition of images. Otherwise if it's false, the pager will be visible! Try it yourself

dark

Type: boolean

false If it's true, the dark mode is activated! Try it yourself

background

ype: string

"off" There are 3 modes for pager background: "off", "white" and "dark". By default, there is no background! Try it yourself