I have a question about carousel (slider).

I created a slider, but when I click .link (click to fly all at once) where it does not change (current===$(this).attr("role")), .left or .right that should have been hidden() is displayed.
Therefore, I would like to know why hide() is not implemented, and if possible, I would like to know the solution.

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).atttr("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">Comments</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">Comments</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">Comments</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">Comments</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 href="#">a href="#"<a href="#">2"
    </div>

javascript html jquery

2022-09-30 19:35

1 Answers

I'm sorry.Resolved.
I switched to parseInt(currentSlide) and it worked.

2022-09-30 19:35

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656