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

Question

在尝试了许多预制的滑块后，没有一个能完全按照我的意愿工作，或者与其他代码有冲突，我决定尝试自己制作一个。

使用此示例作为基础，http://rafbm.github.io/howtomakeaslider/

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

每当您到达最后一张幻灯片时，“下一张”按钮就会消失，让人们知道之后不再有幻灯片。（加载第一张幻灯片时同样适用->“上一张”按钮已淡出/消失，因为之前没有幻灯片）。

这是在 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
},

当您到达各自的终点时，基本上会隐藏您的导航元素。