任何滑块缩略图不滑动答案

【问题标题】：AnythingSlider thumbnails not sliding任何滑块缩略图不滑动
【发布时间】：2012-08-30 12:31:18
【问题描述】：

我一直在努力解决这个问题，在文档中找不到解决方案。 AnySlider 正在根据需要创建缩略图，但它们不会移动。它们似乎已修复，仅显示 9 个缩略图。问题是当我添加超过 9 张照片时，缩略图会堆叠在下一行，而不是添加到当前并隐藏。

这是我正在使用的代码：

$('#slider1')
              .anythingSlider({
               navigationFormatter : function(i, panel){ // add thumbnails as navigation links
                return '<img src="images/thumbs' + ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19',][i - 1] + '.jpg">';
               },
                // Callback when the plugin finished initializing
                onInitialized: function(e, slider) {

                    var time = 1000, // allow movement if < 1000 ms (1 sec)
                        range = 50,  // swipe movement of 50 pixels triggers the slider
                        x = 0, t = 0, touch = "ontouchend" in document,
                        st = (touch) ? 'touchstart' : 'mousedown',
                        mv = (touch) ? 'touchmove' : 'mousemove',
                        en = (touch) ? 'touchend' : 'mouseup';

                    slider.$window.add( slider.$controls )
                        .bind(st, function(e){
                            // prevent image drag (Firefox)
                            e.preventDefault();
                            t = (new Date()).getTime();
                            x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; 
                        })
                        .bind(en, function(e){
                            t = 0; x = 0;
                        })
                        .bind(mv, function(e){
                            e.preventDefault();
                            var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
                            r = (x === 0) ? 0 : Math.abs(newx - x),
                            // allow if movement < 1 sec
                            ct = (new Date()).getTime();
                            if (t !== 0 && ct - t < time && r > range) {
                                if (newx < x) { 
                                    if ($(this).hasClass('anythingControls')) {
                                        slider.$controls.find('.next').trigger('click');
                                    } else {
                                        slider.goForward();
                                    }
                                    return false;
                                }
                                if (newx > x) {
                                    if ($(this).hasClass('anythingControls')) {
                                        slider.$controls.find('.prev').trigger('click');
                                    } else {
                                        slider.goBack(); 
                                    }
                                }
                                t = 0; x = 0;
                                return false;
                            }
                        });
                }
               });});});

你知道这个配置有什么问题吗？提前致谢！

【问题讨论】：

您是在document.ready() 函数中运行它还是在#slider1 元素之后包含代码？
这段代码在 .js 文件中，通过 header.js 加载，然后在文档准备好时执行。
只是确保。我想到的第一件事是确保它在 DOM 加载后运行。我在最后看到了几个额外的});，但我假设这些是意外复制到问题中的额外内容。尝试使用 Firebug 或错误控制台，看看 Javascript 是否在您的代码上抛出任何错误。您可以尝试使用 Firebug 在 onInitialized 函数中设置一些断点来验证它是否正在运行。
我试过了，我没有看到任何错误，我认为它没有正确配置，因为它没有显示箭头。我会继续研究，看看能不能找到解决办法。
尝试删除所有多余的代码，然后使用$('#slider1').anythingSlider(); 设置默认滑块以查看是否加载。

标签： jquery carousel thumbnails anythingslider

【解决方案1】：

您似乎缺少navigationSize option 设置。默认为false，不限制可见控件的数量。

我相信 this is the demo 你在模仿。

【讨论】：

是的！那个，但不同的是，我使用图像作为缩略图而不是数字。我试试，应该也是可以的。谢谢！