カルーセル(スライダー)について質問です。

スライダーを作成したのですが、.link(クリックすると、一気に飛ぶボタン)を変化しない場所(current===$(this).attr("role")) でクリックした際に、hide()したはずの.leftや.rightが表示されてしまいます。
なので、なぜhide()が実行されないのかという点と、その解決策をできれば教えていただきたいです。

main.js

var slideWidth="700";
var currentSlide = 0;
var numSlides;

function showSlide(index){
    if(index===0){
         $(".left").hide();
    } else {
         $(".left").show();
    }

    if(index===numSlides-1){
        $(".right").hide();
    } else {
        $(".right").show();
    }

    $(".items").stop().animate({
        left: -slideWidth * currentSlide + "px"
    }, 600);
}

$(function(){
     numSlides = $(".items > .item").length;

     showSlide(currentSlide);

     $(".left").click(function(){
        currentSlide--;
        showSlide(currentSlide);
        return false;
     })

    $(".right").click(function(){
        currentSlide++;
        showSlide(currentSlide);
        return false;
     })

    $(".link").click(function(){
        currentSlide = $(this).attr("role");
        showSlide(currentSlide);
        return false;
    })
})

index.html

        <div class="items">
          <div class="item">
            <p class="photo"><img src="../img/CSS_Method_sample/012_carousel1/img/photo01.jpg" width="700" height="390" alt=""></p>
            <p class="comment"> コメント</p>
          </div>
          <div class="item">
            <p class="photo"><img src="../img/CSS_Method_sample/012_carousel1/img/photo02.jpg" width="700" height="390" alt=""></p>
            <p class="comment"> コメント</p>
          </div>
          <div class="item">
            <p class="photo"><img src="../img/CSS_Method_sample/012_carousel1/img/photo03.jpg" width="700" height="390" alt=""></p>
            <p class="comment"> コメント</p>
          </div>
          <div class="item">
            <p class="photo"><img src="../img/CSS_Method_sample/012_carousel1/img/photo04.jpg" width="700" height="390" alt=""></p>
            <p class="comment"> コメント</p>
          </div>
        </div>


      </div>

      <div class="slider">
        <a class="prev browse left"></a>
        <a class="prev browse right"></a>
      </div>

      <div class="navi"><a href="#" class="link" role="0"></a><a href="#" class="link" role="1"></a><a href="#" class="link" role="2"></a><a href="#" class="link" role="3"></a></div>
    </div>