我如何在这些演示中利用外部导航来创建以前的下一个外部控件



这是AnythingSlider 的两个资源示例

http://jsfiddle.net/Mottie/Cm479/4398/

http://jsfiddle.net/Mottie/Cm479/4401/

我需要简单的上一个/下一个和暂停播放导航,但外部的Anythingsslider。有人能帮我吗?

诚挚的问候,

Junaid

这是一个非常基本的例子(演示),但请尝试这个HTML

<div id="externalNav">
Goto <a href="#1">One</a> |
    <a href="#2">Two</a> |
    <a href="#3">Three</a> |
    <a href="#4">Four</a> |
    <a class="play" href="#play">Play</a>
</div>

和这个脚本

var $s = $('#slider');
$s.anythingSlider({
    // If true, builds a list of anchor links to link to each panel
    buildNavigation: false,
    buildStartStop: false
});
// set up external links
$('#externalNav a').click(function(){
    // get slide number (ignore the #)
    var slide = $(this).attr('href').substring(1),
        // get AnythingSlider data object
        slider = $s.data('AnythingSlider');
    if (slide === "play") {
        // toggle slideshow
        slider.startStop( !slider.playing );
        // change link text
        $('a.play').text( slider.playing ? 'Pause' : 'Play' );
    } else {
        // go to selected slide
        $s.anythingSlider(slide);
    }
    // prevent link from changing the hash
    return false;
});

查看此示例:http://jsfiddle.net/ycUB6/982/

我认为您可以将onInitialized参数/函数更改为以下内容:

onInitialized: function(e, slider) {
    $("a.next-slide").click(function(){
        slider.goForward();
    });
    $("a.prev-slide").click(function(){
        slider.goBack();
    });
}       

当然,您可以使用next/prev链接上的任何类/id。

最新更新