jQuery - 在滑块中显示/隐藏上一个/下一个按钮

我正在尝试在一个非常基本的滑块中控制导航(从简单的在线示例拼凑而成(。

我的目标是在到达最后一张幻灯片时隐藏"下一步"按钮，反之隐藏第一张幻灯片上的"上一张"按钮，这可以通过捕获 li"活动"(当前幻灯片显示(类然后隐藏它来完成吗？

我的相关代码如下：

jQuery(document).ready(function ($) {
//set vars for slider size
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
//move left function (prev)
function moveLeft() {
    $('#slider ul').animate({
        left: + slideWidth
    }, 700, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};
//move right function (next)
function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 700, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};
// call functions on click 
$('a.control_prev').click(function () {
    moveLeft();
});
$('a.control_next').click(function () {
    if ($(this).hasClass('final')){
    $('a.control_next').hide();
    }
    else{
        moveRight();
    }
});
}); 

和 HTML 滑块列表：

<div id="slider">
 <a href="#" class="control_next">></a>
 <a href="#" class="control_prev"><</a>
   <ul>
     <li><img src="sme1.png" height="550"/></li>
     <li><img src="sme2.png" height="550"/></li>
     <li><img src="sme3.png" height="550"/></li>
     <li class="final"><img src="sme4.png" height="550"/></li>
   </ul>  
</div>

我可以想到不同的方法来解决这个问题，但这是我决定尝试解决的解决方案，任何帮助都值得赞赏！！

JSFIDDLE： http://jsfiddle.net/o31ksujt/3/