大家好,我正在使用 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 的智能技巧来克服这个错误吗?或者我在做一些明显错误的事情吗?有人可以解释一下吗?
谢谢。
最佳答案
嗯,实际上,在我发布问题后仅一秒钟,我就意识到随机播放选项已启用:
shuffle: true,
需要将其变为 false。
附注我相信当随机播放打开时,gotoSlide
应该关闭或不应该工作,或者应该在控制台中记录一条消息,说“当随机播放打开时,gotoSlide
” code> 功能失调”,我刚刚在这个问题上花了 2 个小时,我认为在打开随机播放时使用 gotoslide
没有任何意义!
关于javascript - gotoSlide(index) 在 sliderPro 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35780590/