Как остановить следующую кнопку от показа первого div?

Question

У меня есть код, который будет перемещаться между каждым div при нажатии кнопки.Если у меня 5 divs, и я нажимаю кнопку next 5 раз, она достигает конца.Но когда я нажимаю 6-й раз, он снова показывает 1-й div как цикл.То же самое в случае с кнопкой previous.Как перестать ходить с 5 на 1?И если я хочу вернуться к div 1, единственный способ должен состоять в том, чтобы нажать кнопку previous и перейти.

JSFiddle

html:

<div class="divs">
    <div class="cls1">1</div>
    <div class="cls2">2</div>
    <div class="cls3">3</div>
    <div class="cls4">4</div>
    <div class="cls5">5</div>
    <div class="cls6">6</div>
    <div class="cls7">7</div>
</div>
<a id="next">next</a>
<a id="prev">prev</a>

js:

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});

Answer 1

просто обновите функцию следующего и предыдущего клика, чтобы она не возвращалась к первому и последнему div

 $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide(); 
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        return false;
    });

Answer 2

Вы должны удалить блок else из каждого обратного вызова. Если не видно больше div s, блок else скроет все видимые div s и покажет первый при нажатии на следующий или последний при нажатии на предыдущий.

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        return false;
    });
});