FlexSlider Properties

https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

WIP

FlexSlider hosts many features, and there's a chance you'll find yourself needing to read up on a few of them. Below is an overview table of the features available in FlexSlider, followed by detailed information and tips regarding each property.

Property	Default	Description
namespace	"flex-"	String Prefix string attached to the classes of all elements generated by the plugin.
selector	".slides > li"	Selector Must match a simple pattern.'{container} > {slide}'.
animation	"fade"	String Controls the animation type, "fade" or"slide".
easing	"swing"	String Determines the easing method used in jQuery transitions.
direction	"horizontal"	String Controls the animation direction,"horizontal" or "vertical"
reverse	false	Boolean Reverse the animation direction.
animationLoop	true	Boolean Gives the slider a seamless infinite loop.
smoothHeight	false	Boolean Animate the height of the slider smoothly for slides of varying height.
startAt	0	Number The starting slide for the slider, in array notation.
slideshow	true	Boolean Setup a slideshow for the slider to animate automatically.
slideshowSpeed	7000	Number Set the speed of the slideshow cycling, in milliseconds
animationSpeed	600	Number Set the speed of animations, in milliseconds
initDelay	0	Number Set an initialization delay, in milliseconds
randomize	false	Boolean Randomize slide order, on load
pauseOnAction	true	Boolean Pause the slideshow when interacting with control elements.
pauseOnHover	false	Boolean Pause the slideshow when hovering over slider, then resume when no longer hovering.
useCSS	true	Boolean Slider will use CSS3 transitions, if available
touch	true	Boolean Allow touch swipe navigation of the slider on enabled devices
video	false	Boolean Will prevent use of CSS3 3D Transforms, avoiding graphical glitches
controlNav	true	Boolean Create navigation for paging control of each slide.
customDirectionNav	""	jQuery Object/Selector Container the custom navigation markup works with.
directionNav	true	Boolean Create previous/next arrow navigation.
prevText	"Previous"	String Set the text for the "previous" directionNavitem
nextText	"Next"	String Set the text for the "next" directionNavitem
keyboard	true	Boolean Allow slider navigating via keyboard left/right keys.
multipleKeyboard	false	Boolean Allow keyboard navigation to affect multiple sliders.
mousewheel	false	Boolean (Dependency) Allows slider navigating via mousewheel
pausePlay	false	Boolean Create pause/play element to control slider slideshow.
pauseText	"Pause"	String Set the text for the "pause" pausePlay item
playText	"Play"	String Set the text for the "play" pausePlay item
controlsContainer	""	jQuery Object/Selector Container the navigation elements should be appended to.
manualControls	""	jQuery Object/Selector Define element to be used in lieu of dynamic controlNav.
sync	""	Selector Mirror the actions performed on this slider with another slider.
asNavFor	""	Selector Turn the slider into a thumbnail navigation for another slider.
itemWidth	0	Number Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin	0	Number Margin between carousel items.
minItems	0	Number Minimum number of carousel items that should be visible.
maxItems	0	Number Maximum number of carousel items that should be visible.
move	0	Number Number of carousel items that should move on animation.
start	empty	Function Fires when the slider loads the first slide.
before	empty	Function Fires asynchronously with each slider animation.
after	empty	Function Fires after each slider animation completes.
end	empty	Function Fires when the slider reaches the last slide (asynchronous).
added	empty	Function Fires after a slide is added.
removed	empty	Function Fires after a slide is removed.

flexslider 使用教程

http://www.zendei.com/article/9882.html

英文什麼的，我才不想看咧……照著1234就好

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

　　

註釋說明

 1 /**
 2  * Created by wuxiaolu on 2016/5/28.
 3  */
 4 $('.flexslider').flexslider({
 5     animation: "slide", // "fade" or "slide"圖片變換方式：淡入淡出或者滑動
 6     slideDirection: "horizontal", //"horizontal" or "vertical"圖片設置為滑動式時的滑動方向：左右或者上下
 7     selector: '.thumbnails .thumbnail',//滾動項目選擇器
 8     slideshowSpeed: 5000, // 自動播放速度毫秒
 9     animationSpeed: 600, //滾動效果播放時長
10     pausePlay: false,//是否顯示播放暫停按鈕
11     minItems: common.globals.SCREEN.ITEM,//最少顯示多少項
12     itemWidth: 220,//一個滾動項目的寬度
13     itemMargin: 20,//滾動項目之間的間距
14     slideshow: true, //Boolean: Animate slider automatically 載入頁面時，是否自動播放
15     animationDuration: 600, //Integer: S動畫淡入淡出效果延時
16     directionNav: true, //Boolean:  (true/false)是否顯示左右控制按鈕
17     controlNav: true, //Boolean:  usage是否顯示控制菜單//什麼是控制菜單？
18     keyboardNav: true, //Boolean:left/right keys鍵盤左右方向鍵控製圖片滑動
19     mousewheel: false, //Boolean: mousewheel滑鼠滾輪控制製圖片滑動
20     prevText: "Previous", //String: 上一項的文字
21     nextText: "Next", //String: 下一項的文字
22     pauseText: 'Pause', //String: 暫停文字
23     playText: 'Play', //String: 播放文字
24     randomize: false, //Boolean: Randomize slide order 是否隨機幻燈片
25     slideToStart: 0, //Integer:  (0 = first slide)初始化第一次顯示圖片位置
26     animationLoop: true, //  "disable" classes at either end 是否迴圈滾動 迴圈播放
27     pauseOnAction: true, //Boolean:  highly recommended.
28     pauseOnHover: false, //Boolean: 滑鼠糊上去是否暫停
29     controlsContainer: "", //Selector:  be taken.
30     manualControls: ".js-slidernav i", //Selector: .自定義控制導航// 小圓點活數字標示 css 選擇器
31     manualControlEvent: "", //String:自定義導航控制觸發事件:預設是click,可以設定hover
32     move: 0, //int:一次滾動項目個數
33     start: function (slider) {
34     }, //Callback: function(slider) - Fires when the slider loads the first slide 載入第一頁觸發
35     before: function (slider) {
36     }, //Callback: function(slider) - Fires asynchronously with each slider animation 每個滾動動畫開始時非同步觸發
37     after: function (slider) {
38     }, //Callback: function(slider) - Fires after each slider animation completes 每個滾動動畫結束時觸發
39     end: function (slider) {
40     } //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous) 滾動到最後一頁時非同步觸發
41 });

另外補充說明

1.回調的非同步大概指的是，觸發了回調動畫仍會繼續播放

2.回調參數里的slider我接下來詳細要講的

http://www.verydemo.com/demo_c316_i228874.html

https://wefollownews.appspot.com/cittopnews201408_52/9552.html

http://blog.reve.tw/flexslider/

製作自己的 jQuery Plugin

jQuery學習筆記 第一堂（軟體安裝、文字格式修改）

https://pjchender.blogspot.tw/2015/03/jquery.html

推薦 Adobe Brackets

寫jQuery Mobile好工具–WebMatrix 2

http://vmiv.blogspot.tw/2012/06/jquery-mobilewebmatrix-2.html

練習 jQuery的小工具–jQueryPad
http://kevintsengtw.blogspot.tw/2012/02/jqueryjquerypad.html


jQuery 練習題：三層式連動下拉選單（無後端整合）
http://kevintsengtw.blogspot.tw/2012/05/jquery_29.html

參考開發工具
http://jqmdesigner.appspot.com/designer.html#id=1467797822436

10个最棒的jQuery和HTML所见即所得编辑器插件
http://webres.wang/10-best-html-wysiwyg-plugins/

-----------------------------------------------
http://coyanlee.blogspot.tw/2012/04/jquery-plugin-produce.html

Plugin 命名

取一個自己高興的名字，不過當然最好是能夠看的出來 plugin 功能的名稱。建議格式為 jquery.[自訂的 plugin 名稱].js。
如，jquery.foobar.js。

自訂方法

擴充 jQuery 物件，建立一個或多個 plugin 方法 (method)，如：
Create one or more plugin methods by extending the jQuery object, eg.:

?

1 2 3

jQuery.fn.foobar = function() {    // do something  };

建立以上的方法後，我們將可以這樣存取這個方法：

?

1	$(...).foobar();

預設設定

建立一些可讓使用者自訂的預設設定：

?

1 2 3 4 5

jQuery.fn.foobar = function(options) {    var settings = jQuery.extend({      value: 5, name: "pete", bar: 655    }, options);  };

我們將可以不做任何設定 (使用預設值) 來呼叫這個方法：

?

1	$("...").foobar();

或者可以設定 value、name、bar 這三個選項中任意個的值：

?

1	$("...").foobar({ value: 123, bar: 9 });

文件

如果打算將自己做的 plugin 發佈出去給別人使用，最好可以提供一些使用例子和說明文件，這樣可以幫助別人理解 plugin 的功能與用法。

實例

舉一個 checkbox 的例子。

我們在做表單時，時常會使用到 checkbox 或 radio button，然後我們可能會希望在某個事件發生時，其可以被選取或者被不選取。

先將這個例子簡化，假設我們要做一個可以選取 checkbox 的 plugin：

?

1 2 3 4 5

jQuery.fn.check = function() {    return this.each(function() {      this.checked = true;    });  };

注意上例中的 this 指的是所選取的元素 (element)，此 plugin 可以這樣使用：

?

1	$(":checkbox").check();

這時候 this 所指的就是文件中所有 checkbox。

接著我們利用上面這個 plugin 來延伸出反選取和切換選取的功能(選取切換成未選取，以及反之)。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

jQuery.fn.check = function(mode) {    // 如果沒有傳入 mode 參數，則預設使用 on    var mode = mode || 'on';         return this.each(function() {      switch(mode) {        case 'on':          this.checked = true;          break;        case 'off':          this.checked = false;          break;        case 'toggle':          this.checked = !this.checked;          break;      }    });  };

用法如下：

?

1 2 3 4

$(":checkbox").check();  $(":checkbox").check('on');  $(":checkbox").check('off');  $(":checkbox").check('toggle');

當然上述都是很簡單的例子，因此可能看不出製作成 plugin 的好處，但是較為複雜卻常用的功能，只要多花一點點時間改寫為 plugin，就可以節省很多重複開發的時間了。