People who use the Amaze UI know that their slideshow plugin is data-am-slider= ' {} ' to pass parameters: (The following code is from the Amaze UI website)
<DivData-am-widget= "Slider"class= "Am-slider am-slider-default"Data-am-slider= ' {} '> <ulclass= "Am-slides"> <Li> <imgsrc= "Http://s.amazeui.org/media/i/demos/bing-1.jpg"> </Li> <Li> <imgsrc= "Http://s.amazeui.org/media/i/demos/bing-2.jpg"> </Li> <Li> <imgsrc= "Http://s.amazeui.org/media/i/demos/bing-3.jpg"> </Li> <Li> <imgsrc= "Http://s.amazeui.org/media/i/demos/bing-4.jpg"> </Li> </ul></Div>
Flexslider is a jQuery-based slide plug-in that is powerful and has the following features:
- The label is simple.
- Horizontal/Vertical slide or fade animation
- Support Thumbnail image
- Multiple ways to control, including mouse click, mouse wheel, keyboard control
- Custom Navigation Options
- Multi-slider support, rich and powerful callback API
- Responsive design
- Support for all major browsers
- Compatible with the latest jQuery version
- Hardware acceleration
In short, Flexslider is a very powerful slide plug-in, through the following numerous parameters can be seen. At the same time, Flexslider CSS can be written on its own, with parameters, you can make a variety of slides.
Parameters
The following parameters are based on the Flexslider 2.2.0 version.
Parameters |
Description |
Default Value |
Namespace |
namespaces, if you have more than one slide, and you have different styles, you can use this property to add names to different slides |
No |
Selector |
|
|
Animation |
Slide transition mode, fade or slide can be selected |
Fade |
Easing |
|
Swing |
Direction |
Select slide Toggle mode to Horizontal or vertical |
Horizontal (horizontal) |
Reverse |
Select slide Switch mode to reverse |
|
Animationloop |
Whether to loop |
True |
StartAt |
Slide starts with the first few sheets |
0 |
Slideshow |
Whether to play automatically |
True |
Slideshowspeed |
Slide transition interval, in milliseconds |
7000 |
Animationspeed |
Slide Animation Toggle Time |
600 |
Initdelay |
How long the slide is delayed, in milliseconds |
0 |
Randomize |
Whether the slides are randomly arranged |
False |
Availability of |
Pauseonaction |
Whether to pause AutoPlay when you manipulate slides |
True |
Pauseonhover |
Whether to pause AutoPlay when hovering over the mouse |
|
Usecss |
Whether to use CSS3 over animation |
True |
Touch |
Whether to allow touch control on touch devices |
True |
Video |
Whether the video is used on the slide will prevent the CSS3 3D transform to avoid faulty graphics |
False |
Master control |
Controlnav |
Whether to show bottom navigation |
True |
Directionnav |
Whether to show left and right (previous/next) control |
True |
Prevtext |
Set the text displayed by the previous button |
Previous |
Nexttext |
Set the text that the Next button displays |
Nexttext |
Secondary navigation |
Keyboard |
Whether to allow keyboard control |
True |
Multiplekeyboard |
Allows keyboard navigation to affect multiple sliders. The default behavior cuts the keyboard navigation with multiple sliders present. |
False |
MouseWheel |
is controlled by mouse wheel, need to cooperate with Jquery.mousewheel.js |
False |
Pauseplay |
Whether the play/pause button is turned on |
False |
Pausetext |
The text of the pause button |
Pause |
Playtext |
The text of the play button |
Play |
Special properties |
Controlscontainer |
Use the class selector. Declares which container's navigation elements should be appended. The default container is the Flexslider element. For example, use will. Flexslider container ". If the specified element property is not found, the attribute is ignored. |
No |
Manualcontrols |
Declaring custom control navigation |
No |
Sync |
|
|
Asnavfor |
|
|
Carousel Options |
Itemwidth |
|
0 |
Itemmargin |
|
0 |
Minitems |
|
0 |
Maxitems |
|
0 |
Move |
|
0 |
Callback |
Start |
Callbacks before the start of the slide |
No |
Before |
Callbacks before the start of each slide |
No |
After |
Callback after each slide ends |
|
End |
Callbacks after the end of the slide |
No |
Added |
Callback after the slide is added |
No |
Removed |
Callback After slide removal |
No
|
Flexslider Official website: http://www.woothemes.com/flexslider/
GitHub Managed Address: Https://github.com/woothemes/FlexSlider
Latest Version: 2.0
Click to view the online sample
Slideshow Plugin Flexslider--Amaze UI slide parameters