[Original] flexslider Chinese Document User Guide parameter manual, flexslider User Guide

[Original] flexslider Chinese Document User Guide parameter manual, flexslider User Guide

I want to change the flexslider function used by my predecessors, but I have been suffering for a long time because I cannot find a detailed document or tutorial ...... (That's why I don't like plug-ins)

 

For those who have been suffering from this problem after welfare, I sorted out some of the things I found. It may not be so perfect. Please leave a message to add it.

 

☆Basic usage ☆

 

I don't want to read English or anything ...... Follow 1234.

Https://www.woothemes.com/flexslider/

　　

Description

1/*** Created by wuxiaolu on 2016/5/28. 3 */4 $ ('. flexslider '). flexslider ({5 animation: "slide", // "fade" or "slide" image conversion method: fade in and fade out or slide 6 slideDirection: "horizontal ", // "horizontal" or "vertical" specifies the slide direction when the image is slide: either left or right or up or down 7 selector :'. thumbnails. thumbnail ', // scroll item selector 8 slideshowSpeed: 5000, // automatic playback speed in milliseconds 9 animationSpeed: 600, // scroll effect playback duration 10 pausePlay: false, // whether the pause button is displayed 11 minItems: common. globals. SCRE EN. ITEM, // minimum number of items displayed 12 itemWidth: 220, // The width of a rolling ITEM 13 itemMargin: 20, // the spacing between rolling Items 14 slideshow: true, // Boolean: whether to automatically play the 15 animation Duration: 600, // Integer: S animation fade-in and fade-out effect delay 16 directionNav: true when the animation slider is automatically loaded into the page, // Boolean: (true/false) Whether to display the left and right control buttons 17 controlNav: true, // Boolean: usage whether to display the control menu // What is the control menu? 18 keyboardna V: true, // Boolean: left/right keys keyboard left and right arrow keys control image Slide 19 mousewheel: false, // Boolean: mousewheel mouse wheel control image slide 20 prevText: "Previous", // String: the text of the Previous item 21 nextText: "Next", // String: the text of the Next item 22 pauseText: 'pause', // String: pause text 23 playText: 'play', // String: Play text 24 randomize: false, // Boolean: Randomize slide order: random slide 25 slideToStart: 0, // Integer: (0 = first slide) initialize the first display of the Image Position 26 animationLoop: true, // "disable" classes at either end whether to loop and play 27 pauseOnAction: true, // Boolean: highly recommended.28 pauseOnHover: false, // Boolean: Indicates whether to pause 29 controlsContainer: "", // Selector: be taken.30 manualControls :". js-slidernav I ", // Selector :. custom control navigation // specifies the css selector 31 manualControlEvent: "", // String: Custom navigation control trigger event: click by default, and hover32 move: 0 can be set, // int: Number of rolling items at a time. 33 start: function (slider) {34}, // Callback: function (slider) -Fires when the slider loads the first slide loads the first page, triggering 35 before: function (slider) {36}, // Callback: function (slider) -Fires asynchronously with each slider animation: after: function (slider) {38} is triggered asynchronously at the beginning of each rolling animation. // Callback: function (slider) -Fires after each slider animation completes triggers 39 end: function (slider) {40} // Callback: function (slider) at the end of each rolling animation) -Fires when the slider reaches the last slide (asynchronous) is asynchronously triggered when it is rolled to the last page. 41 });

 

Additional instructions

1. asynchronous callback means that the callback animation will still be played after it is triggered.

2. slider in callback Parameters

 

☆Slider ☆

Continue the operation on the existing slider (use $ ('rolling container selector '). flexslider () to continue some operations, but I will not mention the details)

 

1. Can Be Used in callback

2. You can obtain it by yourself.

1 var slider = $ ('rolling container selector '). data ('flexslider ');

 

Below is the content printed by the slider

 

I would like to explain a few explanations.

Slider. count	Value, total number of rolling items
Slider. currentSlide	Value, current page
Slider. flexAnimate (n)	Method to scroll to a page
Slider. pagingCount	Value, number of pages
Slider. pause ()	Method, pause
Slider. play ()	Method, playing

 

 

 

 

 

 

 

 

 

 

 

Slider. vars is the value you set. Some changes will affect the playback effect, and I did not go into detail, print

 

 

I 'd like to explain it.

Slider. vars. slideshowSpeed

Value to modify the scroll speed

 

 

 

 

In addition, it will be better to add lazyload if there are many images.

 

Foreign plug-ins. If the problem is not found in Baidu, change it to Google in English ~ Thanks to stackoverflow

I think there is a lot to be done before. Don't duplicate the wheel, but you don't need to know the usage of the wheel in detail. You can just refer to the document when using it, who knows if this wheel will expire tomorrow ~ The principle of learning the wheel is the most important.

 

Uncle Lu finds that his blog garden name is too dazzling (pu) Cool (tong). If he forgot his username, he could not find the nickname through Baidu. Why can't he log on to the mailbox?