Question

在尝试了许多预先制作的滑块之后，其中没有一个完全符合我的要求或与其他代码发生冲突，我决定尝试自己创建一个。

以此示例为基础http://rafbm.github.io/howtomakeaslider/

一切正常，但我想在另一个滑块http://webbies.dk/SudoSlider/上找到一个我要添加的选项

每当你到达最后一张幻灯片时，“下一个”按钮就会消失，让人们知道之后没有更多的幻灯片了。（当你加载第一张幻灯片时同样适用 - ＆gt;'之前'按钮已淡出/消失，因为之前没有幻灯片。）

这是在SudoSlider的html中应用它的代码：

<script type="text/javascript" >
    $(document).ready(function(){   
        var sudoSlider = $("#slider").sudoSlider({
           customLink:'a.customLink',
           prevNext:false
        });
    });
</script>

如何将其添加到我现在使用的基础示例中？

非常感谢您的时间。

Answer 1

更改

goTo: function(index) {
// filter invalid indices
if (index < 0 || index > this.li.length - 1)
return

// move <ul> left
this.ul.style.left = '-' + (100 * index) + '%'

this.currentIndex = index
},

到

 goTo: function(index) {
// filter invalid indices
if (index < 0){
    $('#your_left_button').hide();
    return
}else{
    $('#your_left_button').show();
}


if(index > this.li.length - 1){
    $('#your_right_button').hide();
    return
}else{
    $('#your_right_button').show();
}

// move <ul> left
this.ul.style.left = '-' + (100 * index) + '%'

this.currentIndex = index
},

当你到达各自的目的时，基本上会隐藏你的导航元素。

当滑块中没有更多幻灯片时，使“下一个”或“上一个”按钮淡出/消失

1 个答案: