javascript - 手动推进轨道滑块

Question

我正在使用 Zurb 'Orbit' Javascript 滑块http://www.zurb.com/playground/orbit-jquery-image-slider，我想触发我自己的 javascript 以手动向左推进滑块或对。

基本上，我想用我的内容填充它，然后根据用户与整个页面的交互，让该内容“滑动”在视野之外，而不仅仅是计时器功能或点击导航图像图书馆提供。

因此，如果我有一个名为“myLink”的链接，那么像这样......

$('#myLink').click(function() {
   ... code to advance javascript slider...
   $('#content').orbit(?????);
});

如果做不到这一点，我的“内容”将是一个 html 表单和其他类似的东西，有人知道一个很好的免费库，它已经可以满足我的需求了吗？

score 5 · Accepted Answer

使用 "afterLoadComplete" 获取对轨道对象的引用：

var myOrbit;

$(".orbitSlides").orbit({
        afterLoadComplete: function() {
            myOrbit = this;
        }
});

然后使用'shift'功能来改变幻灯片：

myOrbit.shift(1);

或者

myOrbit.shift('prev');

或者

myOrbit.shift('next');

score 4 · Accepted Answer

最简单的方法是

$(".slider-nav .right").click();

模拟被点击的箭头。如有必要，请更改以考虑使用项目符号导航选项。

我不认为你会得到比这更优雅的东西，因为插件不公开任何类型的 API - 它都在插件中私下封闭。

score 0 · Accepted Answer

我用这个

$('#next').click(function(){
$('#rotator').trigger("orbit.next"); 
})
$('#prev').click(function(){
    $('#rotator').trigger("orbit.prev"); 
})

假设 div #rotator 是轨道滑块。

score 0 · Accepted Answer

我无法得到其他一些答案。我知道这有点老套，但我发现这个最简单：

HTML：

<p id='back'>Back</p>
<p id='next'>Next</p>

CSS：（如果你使用内置的navigation_arrows: false;，导航箭头会被移除并且不能再被操作，所以visibility: hidden;来救援！）

.orbit-prev, .orbit-next {
    visibility: hidden;
}

jQuery：

$('#back').on('click', function() {
    $('.orbit-next').click();
});

$('#next').on('click', function() {
    $('.orbit-prev').click();
});

4 回答 4