質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.10%

jQuery カルーセルのスライドボタンが消えずに永遠にスライドできてしまう....

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 524

wikwik129

score 17

jQueryでカルーセルを作る際に以下のコード(html、css、JavaScript)でプレビューしてみるのですが、左矢印が消える処理は出来ているものの最後のスライドになっても右矢印が消えずに永遠にスライドできてしまいます。
何がいけないのか分かりません。どなたか教えていただけると嬉しいです。分かりやすいコードやコメントが出来ていないとは思いますがよろしくお願いします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Test</title>
    <link rel="stylesheet" href="test.css">
  </head>
  <body>
    <div class="carousel">
      <ul class="slides">
        <li><div class="box img1"></div></li>
        <li><div class="box img2"></div></li>
        <li><div class="box img3"></div></li>
        <li><div class="box img4"></div></li>
      </ul>

      <a href="#" class="carousel-control carousel-control-prev inactive">&lt;</a>
      <a href="#" class="carousel-control carousel-control-next inactive">&gt;</a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="test.js"></script>
  </body>
</html>
.box {
  width:400px;
  height:400px;
}

.img1 {
  background-color: blue;
}

.img2 {
  background-color: red;
}

.img3 {
  background-color: yellow;
}

.img4 {
  background-color: skyblue;
}

/*カルーセルのひょうじ範囲指定*/
.carousel {
  position:relative;
  overflow:hidden;
  width:400px;
  height:400px;
  margin:0 auto;
}

/*矢印のスタイル*/
.carousel-control {
  display:block;
  width:30px;
  height:50px;
  background-color:#f0f0f0;
  color:#333;
  text-align:center;
  line-height:45px;
  text-decoration:none;
  font-size:2rem;
  opacity:.5;
  /*透明度をふわっと変える*/
  transition: opacity .15s;
}
/*マウスが乗ったら濃くする*/
.carousel-control:hover {
  opacity:.8;
}

/*コントルールボタンの位置*/
/*左矢印*/
.carousel-control-prev {
  position:absolute;
  left:0;
  top:200px;
  text-indent:-2px;
}
/*右矢印*/
.carousel-control-next {
  position:absolute;
  right:0;
  top:200px;
  text-indent:2px;
}

.slides {
  position:absolute;
  top:0;
  left:0;
  /*横1枚一続き写真にする*/
  width:99999px;
  /*ul liのデフォルトスタイル消去*/
  margin:0;
  padding:0;
  list-style:none;
}
/*各写真を横つなぎにする*/
.slides li {
  float:left;
  width:400px;
  height:400px;
}
//スライド1枚当たりの幅を取得
var slideWidth = 400;
//現在表示中のスライドを数える(0から)
var currentSlide = 0;
//スライドの全枚数
var numSlides;


function showSlide(index) {
  if (index === 0) {
    $(".carousel-control-prev").hide();
  }
  else {
    $(".carousel-control-prev").show();
  }

  if(index === numSlides -1){
    $(".carousel-control-next").hide();
  }else {
    $(".carousel-cotrol-next").show();
  }

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

$(document).ready(function() {
  //スライダーすべての枚数
  numSlides = (".slides > li").length;
  //最初のスライドを表示
  showSlide(currentSlide);

  // 左矢印がクリックされたら1つ前のスライドを表示
  $(".carousel-control-prev").click(function() {
    currentSlide--;
    showSlide(currentSlide);
    return false;
  });

  // 右矢印がクリックされたら1つ後のスライドを表示
  $(".carousel-control-next").click(function() {
    currentSlide++;
    showSlide(currentSlide);
    return false;
  });
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

console.log()でnumSlidesを出力してみれば分かりますが、

function showSlide(index) {
  console.log(index);
  console.log(numSlides);
  if (index === 0) {
    $(".carousel-control-prev").hide();
  }
  else {
    $(".carousel-control-prev").show();
  }
  if(index === numSlides -1){
    $(".carousel-control-next").hide();
  }else {
    $(".carousel-cotrol-next").show();
  }

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


イメージ説明

indexはきちんと増減されているにも関わらずnumSlidesは常に12を表示し続けています。
「スライド数」とするなら本来「4」のはずですね。

なぜか。

下記、かっこだけになってます。

numSlides = (".slides > li").length;
//            123456789111
//                     012 


つまり、 かっこ内の文字列の長さを取得していることになります。

jQueryで要素を取得するならこうですね。

numSlides = $(".slides > li").length;

イメージ説明

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/18 18:07

    回答して頂きありがとうございます。
    タイプ忘れだったんですね...
    この質問を通してconsole.logで確かめながらやる理由が分かりました。
    これからコードを作っていく中で活用していきたいと思います。
    有難うございます。

    キャンセル

  • 2019/03/18 18:23

    解決されたようで何よりです。
    そうですね。エラーになっていないが想定通り動いていない場合、変数の値とか分岐がどこを通ってるかとかを確認していく地道なデバッグが必要不可欠となります。これを機会に覚えてください

    キャンセル

  • 2019/03/18 18:41

    アドバイスも頂きありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる