Question

嘿伙计我正在使用slider-pro，插件可以找到 HERE 。

我为滑块旋转木马创建了自己的简单导航，就像这样，

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 （小提琴有slide pro的js和css代码以及插件的init代码和自定义代码）。

现在让我描述我的问题，我已经测试过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>

当我inspect element我看到有时幻灯片是以随机顺序加载时，这显然使我的自定义导航看起来像它的错误，我不明白有这样的功能 gotoslide ，当插件以随机顺序导致幻灯片时？

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

谢谢。

Answer 1

嗯，实际上在我发布问题后的一秒钟我意识到启用了随机播放选项：

        shuffle: true,

需要转为假。

P.S。打开随机播放时我相信，gotoSlide应该关闭或不应该工作，或者只是在控制台中记录一条消息，说明＆＃34;当打开随机播放时，gotoSlide s功能失调＆＃34; ，我刚刚在这个问题上花了2个小时，我发现在打开随机播放时没有使用gotoslide！

gotoSlide（index）在sliderPro中不起作用

1 个答案: