Detailed setup parameters for the Flexslider plugin

Source: Internet
Author: User

Always use Flexslider this slide plug-in to its parameters is not very familiar with the Internet to see this hurriedly posted out for later use.

$ (window). Load (function () {
$ ('. Flexslider '). Flexslider ({

namespace: ' flex-',//control namespace, affects style prefixes
Animation: "Slide",//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

Selector: '. thumbnails. Thumbnail ',
slideshowspeed:5000,//Auto Play Speed MS
animationspeed:600,//scrolling effect playback duration
pauseplay:false,//whether the Play pause button is displayed
minitems:common.globals.screen.item,//minimum number of items to display
itemwidth:220,//the width of a scrolling item
itemmargin:20,//the spacing between scrolling items
Slideshow:true,//boolean:animate slider automatically automatically play when loading a page
animationduration:600,//integer:s animation fade effect delay
Directionnav:true,//boolean: (true/false) whether the left and right control buttons are displayed
Controlnav:true,//boolean:usage whether the Control menu is displayed//what is the Control menu?
Keyboardnav:true,//boolean:left/right keys keyboard left and right key control picture slide
Mousewheel:false,//boolean:mousewheel mouse wheel control picture sliding
Prevtext: "Previous",//string: The text of the previous item
Nexttext: "Next",//string: The text of the next item
Pausetext: ' Pause ',//string: Pause text
Playtext: ' Play ',//string: Play text
Randomize:false,//boolean:randomize slide order is random slide
slidetostart:0,//integer: (0 = First slide) Initial display of picture position
Animationloop:true,//"Disable" classes at either end whether to loop the loop to play
Pauseonaction:true,//boolean:highly recommended.
Controlscontainer: "",//selector:be taken.
Manualcontrols: ". Js-slidernav i",//selector:. Custom control navigation//small dot Live digital indicator CSS Selector
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)


In the actual work of the above code of $ (window). Load (function () {}); Can be changed to $ (function () {}). Performance will be higher.

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