Question

有没有办法用它的缩略图（由navigationFormatter或外部创建）连接滑块和轮播，这样当我使用滑块的控件移动到下一张幻灯片时，此幻灯片的缩略图不在轮播的当前页面中，轮播幻灯片到下一页？有没有办法让滑块不仅水平展开，而且水平和垂直都保持比例？

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);
    }
});

AnythingSlider缩略图轮播

1 个答案: