Read about the options
{
configDefault: {items:3,sliding:3},
config: {
"480": {
items: 1,
sliding: 1
},
"768": {
items:2,
sliding:1
},
"991": {
items: 3,
sliding: 2
},
},
handleLeft: '.goLeft',
handleRight: '.goRight',
container: null,
animationDuration: 500,
animationEffect: "linear",
autoWidth: true,
fullWidth: false,
fullPage: false,
vertical: false,
timer: null,
onKeyPress: false
}
This configuration of the slider visible items and sliding step will be set if the screen width is wider than any width defined in the config option.
This configuration is a set of breakpoints that contain number of visible items and sliding step. It needs to be configured ascending so we are always going from the smallest to the biggest.
For example. In the default configuration we have set 480px, 768px and 991px breakpoints. If we are :
It is the element which represent the handle which if clicked will move the slider to the Left.
This is set globally, not localy under the container or .slider-container so we must target them with the slider element or even with the Wrapper Container if he have one
It is the element which represent the handle which if clicked will move the slider to the Right.
This is set globally, not localy under the container or .slider-container so we must target them with the slider element or even with the Wrapper Container if he have one
It hold the ID, class or even both to define the Wrapper Container. If the Wrapper Container is set, it will have the same width of the slider.
Mostly used to define easily the controls position
It is a numeric value in miliseconds on how long should the transition last.
Holds the name of the effect we want to happen on sliding.
Listy will use CSS3 transition effects and Transform property to use some hardware and thus improving the whole performance of the Listy.
If a browser does no support CSS3, it will use the jQuery function animate.
Effects:
| Value | Description |
|---|---|
| ease | Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1)) |
| linear | Specifies a transition effect with the same speed from start to end (equivalent to cubic-bezier(0,0,1,1)) |
| ease-in | Specifies a transition effect with a slow start (equivalent to cubic-bezier(0.42,0,1,1)) |
| ease-out | Specifies a transition effect with a slow end (equivalent to cubic-bezier(0,0,0.58,1)) |
| ease-in-out | Specifies a transition effect with a slow start and end (equivalent to cubic-bezier(0.42,0,0.58,1)) |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
It defines if the slider element .slider-container will be adjusted to the width of the total widths of visible elements.
If it is set to False, the width of the slider element needs to be defined with CSS.
Example by using Defaults: We are on a screen of 800px so we are using config of "991". We have our visible items set on 3. If we have defined a slide to be of 200px in width (by default or by setting media-query for that range) our slider element will be set on 200*3 = 600px. And when sliding, it will slide at maximum 2 items per slide.
If we want to use the slider as a fullWidth slider we will have only 1 visible item and a sliding step of maximum 1 item per slide.
The width of slides set by CSS will be ignored and it will be set by the width of the screen.
With this set as TRUE, your slider will become a full page slider that will inherit the window size. With this one you can create great presentations or have a very simple web page.
With this set as TRUE, your slider will become a vertical slider and the handles (left and right) will become Up and Down.
timer is set in integer and produces a timer that will move the slides from left to right and from right to left when it has no more slides.
The value is set in miliseconds.
With this set to TRUE, slides can move by pressing the arrows on your keyboard.
If there is a horizontal slider, the left and right arrows will move the slides.
If the slider is set as a vertical slider, up and down arrows will move the slides.
This documentation is used to learn how to use the Listy Slider and also see other examples on how it can be used