【jQuery】スライドショーの左ボタンをクリックしたときに動くようにしたいです

右をクリックすると順番通りに動くのですが、左をクリックしたときに順番に表示できないです。
現在の記述で改善が必要な部分がありましたらご指摘いただければと思います。
現在の記述で解決したいです。
よろしくお願いいたします。

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
30"use strict";
31$(function() {
32  function slider(target){
33    var box = $('.slider-area'); // スライドする画像を括っているセレクタを格納
34    var prevBtn = $('.slider-ctrl-btn.prev'); // prevボタンのセレクタを格納した変数
35    var nextBtn = $('.slider-ctrl-btn.next'); // prevボタンのセレクタを格納した変数
36    var w = 0; // スライドショーの横幅
37    var h = 0; // スライドショーの高さ
38    var imgW; // スライドする画像の横幅
39    var imgH; // スライドする画像の高さ
40    var items = []; // スライド画像のセレクタを格納した配列
41    var srcList = []; // 画像の参照先を格納する配列
42    var loadIndex = 0; // 読み込み画像をインデックス
43
44    // スライド要素の複製
45    function clone(selector){
46      var cloneSelector = selector.clone(true);
47      $(cloneSelector).attr({
48        'href': selector.attr('href'),
49        'target': selector.attr('target')
50      });
51      return cloneSelector;
52    };
53
54    // スライド
55    function slide(way){
56      removeEvent();
57      var i;
58      var cloneSelector;
59      // nextボタンのクリックで実行される処理
60      if( way < 0 ){
61        cloneSelector = clone(items[0]);
62        $(cloneSelector).css('left', (w*items.length+1)+'px');
63        box.find('ul').append( cloneSelector );
64        items.push( $(cloneSelector) );
65        for( i=0; i<items.length; i++){
66          items[i].animate( {'left': (w*i)-w}, 500);
67        };
68      // prevボタンのクリックで実行される処理
69      }else{
70        cloneSelector = clone(items[items.length-1]);
71        $(cloneSelector).css( 'left', (w*-1)+'px');
72        box.find('ul').append( cloneSelector );
73        items.unshift( $(cloneSelector) );
74        for( i=0; i<items.length; i++ ){
75          items[i].animate( {'left': w*i}, 500);
76        };
77      };
78      setTimeout( function(){
79        slideComplete(way);
80      }, 500 );
81    };
82
83    // スライド完了
84    function slideComplete(way){
85      // next
86      if ( way < 0 ){
87        items[0].remove();
88        items.shift();
89      }
90      // prev
91      else {
92        items[items.length-1].remove();
93        items.pop();
94      };
95      addEvent();
96    };
97
98    // イベント設定
99    function addEvent(){
100      prevBtn.on({
101        'click': function(){
102          slide(1);
103        }
104      });
105      nextBtn.on({
106        'click': function(){
107          slide(-1);
108        }
109      });
110    };
111
112    // イベント削除
113    function removeEvent(){
114      prevBtn.off('click');
115      nextBtn.off('click');
116    };
117
118    // 位置調整
119    function pos(){
120      $.each(items, function(index){
121        $(this).css('left', (w*index)+'px');
122      });
123    };
124
125    // リサイズ
126    function resize(){
127      w = target.parent().width();
128      h = Math.floor(w*imgH/imgW);
129      target.width(w).height(h);
130      box.find('ul').width(w).height(h);
131      pos();
132    };
133
134    // セットアップ
135    function setup(){
136      imgW = box.find('img').width();
137      imgH = box.find('img').height();
138      box.find('li').each(function(index){
139        items[index] = $(this);
140      });
141      $(window).on('resize', resize);
142      resize();
143      addEvent();
144    };
145
146    // 画像の読み込み完了
147    function loaded(){
148      if ( loadIndex != (srcList.length-1) ){
149        loadIndex++;
150        imgLoad();
151      } else {
152        setup();
153      };
154    };
155
156    // 画像の読み込み
157    function imgLoad(){
158      var img = new Image();
159      $(img).on('load', loaded).attr('src', srcList[loadIndex]);
160    };
161
162    // 初期設定
163    function init(){
164      box.find('img').each(function(index){
165        srcList[index] = $(this).attr('src');
166      });
167      imgLoad();
168    };
169    init();
170  };
171  slider($('.slider-area'));
172});
173</script>
174</body>
175</html>

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

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

回答1件

ベストアンサー

どう考えてもこのサイトで推奨していない質問の「コードをください・デバッグしてください等の丸投げの質問」に該当すると思うのですが、なんとなく眺めていてこれかなというのを見つけてしまったので。

function slide(way) の 7行目

javascript
1$(cloneSelector).css('left', (w*items.length+1)+'px');

は

javascript
1$(cloneSelector).css('left', (w*(items.length+1))+'px');

の間違いではないでしょうか。

投稿2019/11/23 04:16

2KOH

総合スコア999

退会済みユーザー

2019/11/24 01:54

ありがとうございます！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

【jQuery】スライドショーの左ボタンをクリックしたときに動くようにしたいです

関連した質問