手动推进轨道滑块

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表单和其他类似的东西，任何人都知道一个好的免费库已经做了我想要的吗？

Answer 1

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

var myOrbit;

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

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

myOrbit.shift(1);

或

myOrbit.shift('prev');

或

myOrbit.shift('next');

Answer 2

最简单的方法是

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

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

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

Answer 3

我用这个

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

假设div #rotator是轨道滑块。

Answer 4

我无法获得其他一些工作的答案。我知道它有点hacky但我发现这是最简单的：

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();
});