AnythingSlider thumbnail carousel

Question

有沒有辦法通過它的縮略圖（由navigationFormatter或external創建）來連接滑塊和旋轉木馬，這樣當我使用滑塊的控件移動到下一張幻燈片，並且此幻燈片的縮略圖不在旋轉木馬的當前頁面中時，旋轉木馬滑到下一頁？ 有沒有一種方法可以使滑塊不僅水平擴展，而且水平和垂直都保持比例？

Answer 1

查閱navigationSize option的文檔。有兩個代碼示例可讓您選擇何時移動傳送帶;幻燈片更改之前或之後。

爲了讓滑塊能夠水平和垂直更改尺寸，請在css中定義面板的大小（寬度和高度），並將resizeContents選項設置爲false。

下面是從main demo page第二演示，使用此代碼提取出到jsFiddle演示：

CSS

/* starting slider dimensions; it gets changed to match the panels */ 
#slider { width: 800px; height: 390px; list-style: none; } 
#slider .panel1 { width: 500px; height: 350px; } 
#slider .panel2 { width: 450px; height: 420px; } 
#slider .panel3 { width: 680px; height: 317px; } 
/* With no specific size, the slide defaults to wrapper size; except in IE7, 
it needs a width defined, so set to 100% */ 
#slider .panel4 { width: 100%; } 
#slider .panel5 { width: 680px; height: 317px; } 
#slider .panel6 { width: 450px; height: 300px; } 

腳本

$('#slider').anythingSlider({ 
    // fade mode 
    mode: 'f', 
    // If true, solitary images/objects in the panel will expand to fit the viewport 
    resizeContents: false, 
    // Set this to the maximum number of visible navigation tabs; false to disable 
    navigationSize: 3, 
    // Format navigation labels with text 
    navigationFormatter: function (index, panel) { 
     return ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'][index - 1]; 
    }, 
    onSlideBegin: function (e, slider) { 
     // keep the current navigation tab in view 
     slider.navWindow(slider.targetPage); 
    } 
});