[Original]flexslider Chinese document use tutorial parameter manual

To change the previous use of the flexslider function, but was unable to find a detailed documentation tutorial, tortured for a long time ... (That's why I said I don't want to mess with plugins)

For the benefit of people who suffer from this problem, I have summed up some of the things I found. may not be so perfect right, welcome to add in the message

☆ Basic Use ☆

I don't want to see anything in English. Just follow 1234.

https://www.woothemes.com/flexslider/

　　

Comment Description

1 /**2 * Created by Wuxiaolu on 2016/5/28.3  */4$ ('. Flexslider ')). Flexslider ({5Animation: "Slide",//"Fade" or "slide" image Transform mode: Fade in or slide6Slidedirection: "Horizontal",//the "horizontal" or "vertical" picture is set to the sliding direction when sliding: around or up or down7Selector: '. thumbnails. Thumbnail ',//Scrolling Item Selector8slideshowspeed:5000,//Auto Play speed milliseconds9animationspeed:600,//scrolling effect Playback durationTenPauseplay:false,//whether the Play Pause button is displayed OneMinItems:common.globals.SCREEN.ITEM,//minimum number of items to display Aitemwidth: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 theanimationduration: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 +MouseWheelfalse,//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 APausetext: ' Pause ',//String: Pause text atPlaytext: ' Play ',//String: Play text -Randomizefalse,//boolean:randomize Slide order is a random slide -slidetostart:0,//Integer: (0 = First slide) Initial display of picture position -Animationloop:true,//"Disable" classes at either end whether to cycle through the loop -Pauseonaction:true,//boolean:highly recommended. -Pauseonhover:false,//Boolean: Mouse paste up whether pause inControlscontainer: "",//Selector:be taken. -Manualcontrols: ". Js-slidernav i",//Selector:. Custom control navigation//small dot Live digital indicator CSS selector toManualcontrolevent: "",//String: Custom navigation control Trigger event: Default is click, you can set hover +move:0,//int: Number of items to scroll at a time -Startfunction(slider) { the},//callback:function (Slider)-Fires when the slider loads the first slide load on page trigger *Before:function(slider) { $},//callback:function (Slider)-Fires asynchronously with every slider animation asynchronous firing at the start of each scrolling animationPanax NotoginsengAfterfunction(slider) { -},//callback:function (Slider)-Fires after every slider animation completes at the end of each scrolling animation theEndfunction(slider) { +}//callback:function (Slider)-Fires When the slider reaches the last slide (asynchronous) is triggered asynchronously when scrolling to the final page A});

Additional Notes

1. Callback Async presumably means that triggering the callback animation will still continue to play

2. The slider in the callback parameter I'll talk about it in detail .

☆slider ☆

Proceed to the existing slider (with $ (' Scroll container selector '). Flexslider () can also continue to do some operations, but the details are unclear I do not say much.

1. Can be used in callbacks

2. You can get it yourself

1 var slider=$ (' scrolling container selector '). Data (' Flexslider ');

Here's what the slider prints.

Pick up a few explanations that I used to explain

Slider.count	Value, total number of scrolling items
Slider.currentslide	Value, current page
Slider.flexanimate (N)	method, scroll to a page
Slider.pagingcount	Values, pages
Slider.pause ()	method, pausing
Slider.play ()	method, play

Slider.vars is the value you start setting, some changes will affect the playback effect, I did not delve into, print

or a choice of explanations.

Slider.vars.slideshowSpeed

Value, modified to modify the scrolling speed

Plus if you have more pictures, it's better to join the lazyload Experience

Foreign plug-ins, the problem Baidu will not be replaced by English Google bar ~ thank StackOverflow

I think there is a big said before, do not repeat the wheel, but do not need to understand the use of various wheels in detail, the use of the time can follow the document to the good, who knows that the wheel will not be outdated tomorrow ~ Learning the principle of the wheel is the most important.

Uncle Deer found his blog garden name is too bright (pu) Cool (Tong), forget the user name with Baidu find ┑(￣д￣) ┍, why can't you just log in?

[Original]flexslider Chinese document use tutorial parameter manual