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