javascript - gotoSlide(index) 在 sliderPro 中不起作用

Question

大家好，我正在使用 slider-pro ，可以找到该插件 HERE 。

我为 slider 轮播创建了自己的简单导航，就像这样，

HTML:

 <nav class="slider-navs">
                <a href="#">one</a>
                <a href="#">two</a>
                <a href="#">three</a>
                <a href="#">four</a>
 </nav>

使导航工作的 JS 代码如下:

$('.slider-navs a').on('click' , function(){
        var idx = $(this).index();
        $( '#example3' ).sliderPro('gotoSlide' ,   $(this).index() );
        console.log(idx);
        return false;
    });

<强> FIDDLE HERE ( fiddle 具有 slider pro 的 js 和 css 代码以及插件的初始化代码以及自定义代码)。

现在让我描述一下我的问题，我已经测试过 var idx = $(this).index(); 始终是正确的，所以我的自定义 JS 代码没有任何错误，我已经测试过多次了。问题是幻灯片弄乱了。在 HTML 中，我像这样加载它们:

<div class="sp-slides">
    <div class="sp-slide">
        <img class="sp-image" src="../src/css/images/blank.gif" 
            data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"/>

        <p class="sp-layer sp-white sp-padding"
            data-horizontal="50" data-vertical="50"
            data-show-transition="left" data-show-delay="400">
            ZERO
        </p>

    </div>

    <div class="sp-slide">
        <img class="sp-image" src="../src/css/images/blank.gif" 
            data-src="http://bqworks.com/slider-pro/images/image2_medium.jpg" />

        <p class="sp-layer sp-white sp-padding"
            data-horizontal="50" data-vertical="50"
            data-show-transition="left" data-show-delay="400">
            ONE
        </p>    

    </div>

    <div class="sp-slide">
        <img class="sp-image" src="../src/css/images/blank.gif" 
            data-src="http://bqworks.com/slider-pro/images/image3_medium.jpg" />

        <p class="sp-layer sp-white sp-padding"
            data-horizontal="50" data-vertical="50"
            data-show-transition="left" data-show-delay="400">
            TWO
        </p>
    </div>

    <div class="sp-slide">
        <img class="sp-image" src="../src/css/images/blank.gif" 
            data-src="http://bqworks.com/slider-pro/images/image4_medium.jpg" />

        <p class="sp-layer sp-white sp-padding"
            data-horizontal="50" data-vertical="50"
            data-show-transition="left" data-show-delay="400">
            THREE
        </p>
    </div>

</div>

当我检查元素时，我发现有时幻灯片会以随机顺序加载，这显然使我的自定义导航看起来有问题，我看不出有什么意义功能类似于 gotoslide ，插件什么时候会导致幻灯片以随机顺序排列？

我可以采取一些 Hacky 的智能技巧来克服这个错误吗？或者我在做一些明显错误的事情吗？有人可以解释一下吗？

谢谢。

Answer 1

嗯，实际上，在我发布问题后仅一秒钟，我就意识到随机播放选项已启用:

        shuffle: true,

需要将其变为 false。

附注我相信当随机播放打开时，gotoSlide应该关闭或不应该工作，或者应该在控制台中记录一条消息，说“当随机播放打开时，gotoSlide” code> 功能失调”，我刚刚在这个问题上花了 2 个小时，我认为在打开随机播放时使用 gotoslide 没有任何意义!