Detailed setup parameters for the Flexslider plugin

Source: Internet
Author: User

Flexslider is a very good jquery sliding switch plug-in that supports all major browsers and has a fade-out effect. Suitable for all beginner and advanced web designers. But many people just use the default parameters, today to say the specific parameters to show you!

$ (window). Load (function () {
$ ('. Flexslider '). Flexslider ({
Animation: "Fade",//string:select your animation type, "Fade" or "slide" Picture Transform mode: Fade in or slide
Slidedirection: "Horizontal",//string:select the sliding direction, "horizontal" or "vertical" picture set to sliding direction: left or right or up or down
Slideshow:true,//boolean:animate slider automatically automatically play when loading a page
slideshowspeed:7000,//integer:set the speed of the slideshow cycling, in milliseconds auto play in milliseconds
animationduration:600,//integer:set the speed of animations, in milliseconds animation fade effect delay
Directionnav:true,//boolean:create navigation for Previous/next navigation? (True/false) Whether the left and right control buttons are displayed
Controlnav:true,//boolean:create navigation for paging control of each clide? Note:leave true for Manualcontrols usage whether the Control menu is displayed
Keyboardnav:true,//boolean:allow slider navigating via keyboard left/right keys key keyboard control picture Slide
Mousewheel:false,//boolean:allow slider navigating via MouseWheel mouse wheel control picture sliding
Prevtext: "Previous",//string:set the text for the "Previous" Directionnav Item
Nexttext: "Next",//string:set the text for the "Next" Directionnav item
Pauseplay:false,//boolean:create pause/play dynamic element
Pausetext: ' Pause ',//string:set the text for the ' pause ' Pauseplay item
Playtext: ' Play ',//string:set the text for the ' play ' Pauseplay item
Randomize:false,//boolean:randomize Slide order whether the slide is immediately
slidetostart:0,//integer:the slide, the slider should start on. Array notation (0 = first slide) Initializes the display picture position
Animationloop:true,//boolean:should the animation loop? If False, Directionnav will received ' disable ' classes at either end whether to cycle the scroll
Pauseonaction:true,//boolean:pause the slideshow when interacting with control elements, highly recommended.
Pauseonhover:false,//boolean:pause the slideshow when hovering over slider and then resume when no longer hover Ing
Controlscontainer: "",//selector:declare which container the navigation elements should be appended too. Default container is the flexslider element. Example use would is ". Flexslider-container", "#container", etc. If the given element is not found, the default action would be taken.
Manualcontrols: "",//selector:declare custom control navigation. Example would be ". Flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlnav should match the number of Slides/tabs. Custom Control Navigation
Manualcontrolevent: "",//string: Custom navigation control Trigger event: Default is click, you can set the hover
Start:function () {},//callback:function (slider)-Fires when the slider loads the first slide
Before:function () {},//callback:function (slider)-Fires asynchronously with each slider animation
After:function () {},//callback:function (slider)-Fires after each slider animation completes
End:function () {}//callback:function (slider)-Fires When the slider reaches the last slide (asynchronous)

});
});

Detailed setup parameters for the Flexslider plugin

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.