

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

main.js

[code]

    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;
        })
    })
    
[/code]

index.html  
  

[code]

            <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>
    
[/code]


CC BY-SA 3.0
2017-12-14T06:27:17.790
40265
2017-12-14T06:41:07.217
26234
question
javascript html jquery
カルーセル(スライダー)について質問です。


すみません。解決しました。  
parseInt(currentSlide)に変えたら、うまく実行しました。


CC BY-SA 3.0
2017-12-14T06:41:07.217
40266
2017-12-14T06:41:07.217
26234
40265
answer