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

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

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>JavaScript Test</title>
6    <link rel="stylesheet" href="test.css">
7  </head>
8  <body>
9    <div class="carousel">
10      <ul class="slides">
11        <li><div class="box img1"></div></li>
12        <li><div class="box img2"></div></li>
13        <li><div class="box img3"></div></li>
14        <li><div class="box img4"></div></li>
15      </ul>
16      
17      <a href="#" class="carousel-control carousel-control-prev inactive">&lt;</a>
18      <a href="#" class="carousel-control carousel-control-next inactive">&gt;</a>
19    </div>
20    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
21    <script src="test.js"></script>
22  </body>
23</html>

css
1.box {
2  width:400px;
3  height:400px;
4}
5
6.img1 {
7  background-color: blue;
8}
9
10.img2 {
11  background-color: red;
12}
13
14.img3 {
15  background-color: yellow;
16}
17
18.img4 {
19  background-color: skyblue;
20}
21
22/*カルーセルのひょうじ範囲指定*/
23.carousel {
24  position:relative;
25  overflow:hidden;
26  width:400px;
27  height:400px;
28  margin:0 auto;
29}
30
31/*矢印のスタイル*/
32.carousel-control {
33  display:block;
34  width:30px;
35  height:50px;
36  background-color:#f0f0f0;
37  color:#333;
38  text-align:center;
39  line-height:45px;
40  text-decoration:none;
41  font-size:2rem;
42  opacity:.5;
43  /*透明度をふわっと変える*/
44  transition: opacity .15s;
45}
46/*マウスが乗ったら濃くする*/
47.carousel-control:hover {
48  opacity:.8;
49}
50
51/*コントルールボタンの位置*/
52/*左矢印*/
53.carousel-control-prev {
54  position:absolute;
55  left:0;
56  top:200px;
57  text-indent:-2px;
58}
59/*右矢印*/
60.carousel-control-next {
61  position:absolute;
62  right:0;
63  top:200px;
64  text-indent:2px;
65}
66
67.slides {
68  position:absolute;
69  top:0;
70  left:0;
71  /*横１枚一続き写真にする*/
72  width:99999px;
73  /*ul liのデフォルトスタイル消去*/
74  margin:0;
75  padding:0;
76  list-style:none;
77}
78/*各写真を横つなぎにする*/
79.slides li {
80  float:left;
81  width:400px;
82  height:400px;
83}

JavaScript
1//スライド１枚当たりの幅を取得
2var slideWidth = 400;
3//現在表示中のスライドを数える（０から）
4var currentSlide = 0;
5//スライドの全枚数
6var numSlides;
7
8
9function showSlide(index) {
10  if (index === 0) {
11    $(".carousel-control-prev").hide();
12  }
13  else {
14    $(".carousel-control-prev").show();
15  }
16  
17  if(index === numSlides -1){
18    $(".carousel-control-next").hide();
19  }else {
20    $(".carousel-cotrol-next").show();
21  }
22
23  $(".slides").stop().animate({
24    left: -slideWidth * currentSlide + "px"
25  }, 600);
26}
27
28$(document).ready(function() {
29  //スライダーすべての枚数
30  numSlides = (".slides > li").length;
31  //最初のスライドを表示
32  showSlide(currentSlide);
33
34  // 左矢印がクリックされたら1つ前のスライドを表示
35  $(".carousel-control-prev").click(function() {
36    currentSlide--;
37    showSlide(currentSlide);
38    return false;
39  });
40
41  // 右矢印がクリックされたら1つ後のスライドを表示
42  $(".carousel-control-next").click(function() {
43    currentSlide++;
44    showSlide(currentSlide);
45    return false;
46  });
47});
48

行動規範の内容に同意します

回答1件

ベストアンサー

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

js
1function showSlide(index) {
2  console.log(index);
3  console.log(numSlides);
4  if (index === 0) {
5    $(".carousel-control-prev").hide();
6  }
7  else {
8    $(".carousel-control-prev").show();
9  }
10  if(index === numSlides -1){
11    $(".carousel-control-next").hide();
12  }else {
13    $(".carousel-cotrol-next").show();
14  }
15
16  $(".slides").stop().animate({
17    left: -slideWidth * currentSlide + "px"
18  }, 600);
19}
20

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

なぜか。

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

Js
1numSlides = (".slides > li").length;
2//            123456789111
3//                     012

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

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

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

投稿2019/03/18 00:24

編集2019/03/18 00:35

m.ts10806

総合スコア80850

wikwik129

2019/03/18 09:07

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

m.ts10806

2019/03/18 09:23

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

wikwik129

2019/03/18 09:41

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

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

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

関連した質問