スライドショーをjQueryで実装したい

前提・実現したいこと

スライドショーをjQueryで実装したいです。
自力で実装してみたものの、 prevボタンとnextボタンのボタンが機能していません。

発生している問題・エラーメッセージ

slideArray　で画像のwidthは取得していているものの、
slideArray、i、index が上手く連携できておらず、スライドショーが実装できていません・・・

そもそもスライドが実現できていませんが、「最後のスライドの場合ははじめに戻る」ようにコードも追加したいです。

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6<meta name="format-detection" content="telephone=no">
7<title></title>
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/base.css">
10<link rel="stylesheet" href="css/style.css">
11</head>
12<body>
13<div class="wrapper">
14    <div class="slider-wrap">
15        <div class="slider-area">
16            <ul class="slider-list clearfix">
17                <li><img src="img/1.jpg" alt=""></li>
18                <li><img src="img/2.jpg" alt=""></li>
19                <li><img src="img/3.jpg" alt=""></li>
20                <li><img src="img/4.jpg" alt=""></li>
21            </ul>
22            <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button>
23            <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button>
24        </div>
25    </div>
26</div>
27<script type="text/javascript" src="js/jquery.js"></script>
28<script type="text/javascript">
29

CSS
1.slider-wrap {
2    width: 600px;
3    padding: 10px;
4    margin: 0 auto;
5    border-radius: 10px;
6    background-color: #DDD;
7    box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4);
8}
9.slider-area {
10    position: relative;
11    width: 600px;
12    height: 300px;
13    background-color: #FFF;
14    overflow: hidden;
15}
16.slider-list {
17    position: absolute;
18    top: 0;
19    left: 0;
20    width: 2400px;
21    height: 300px;
22}
23.slider-list > li { float: left; }
24.slider-ctrl-btn {
25    position: absolute;
26    top: 50%;
27    width: 30px;
28    height: 30px;
29    margin-top: -15px;
30    cursor: pointer;
31    border-radius: 15px;
32    background-color: rgba(255, 255, 255, 0.5);
33}
34.slider-ctrl-btn.prev { left: 30px; }
35.slider-ctrl-btn.next { right: 30px; }

jQuery
1"use strict"
2$(function() {
3  var $slider = $(".slider-list"),
4      slideArray = [],
5      slideWidth = $slider.find("li").width(), //リストの幅を取得
6      slideNum = $slider.find("li").length, //リストの配列の数を取得
7      index = 0; //今何番目か
8
9
10  for(var i = 0; i < slideNum; i++) {
11    //リストの数が4未満の時に繰り返す
12    //i = リストi番目
13    slideArray[i] =   - i * slideWidth;
14  }
15
16  $(".slider-ctrl-btn").on("click", function() {
17    // console.log(slideWidth),
18    // console.log(slideNum),
19    // console.log(slideArray),
20    slide($(this).data("ctrl"));
21  });
22
23  function slide(command) {
24    if (command === "prev") {
25        if (index > (slideNum - 1)) {
26       index = 0
27     }
28    }
29    if (command === "next") {
30      if (index < 0){
31        index++;
32      }
33    }
34    $(".slider-list").animate({left: slideArray[index]},2000);
35  }
36
37
38});

ここにより詳細な情報を記載してください。

初学者で初歩的な質問ですみません！
具体的にどう書くと実現できるかが知れると大変助かります。
よろしくお願い致します。

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

回答1件

ベストアンサー

初期条件がindex = 0, slideNum = 4となっています。
この時、slide関数の条件文がどうなるかというと、

js
1    if (command === "prev") {
2        if (index > (slideNum - 1)) {   // 0 > 4-1 なので条件不成立
3       index = 0
4     }
5    }
6    if (command === "next") {
7      if (index < 0){                   // 0 < 0 なので条件不成立
8        index++;
9      }
10    }

となり、それぞれ条件が成立しないため、indexが変更されず、何も起きません。

ですので、解決方法は「条件式を見直すこと」でしょう。

また、command === "prev"の時に、どこかでindex--という処理も必要なのではないかな、と感じます。

「最後のスライドの場合ははじめに戻る」ようにコードも追加したい

以下のようにすればいいかと思います。

js
1        if (index > (slideNum - 1)) {
2       index = 0
3     }

投稿2021/04/05 07:05

Lhankor_Mhy

総合スコア36158

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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