任何滑块缩略图轮播

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