jQueryのスライドショーのイベントバインドと処理を分けて実装しています。

slider関数の中に変数とfor文を入れるとコンソールでエラーは出なかったのですが、右にクリックしたときに1つしかスライドしませんでした。
なぜ変数とfor文をslider関数の中に入れてしまうと動作できないのかを教えていただきたいです。

具体的にやりたいことは、ボタンをクリックしたときにslider関数を読み込むようにしたいです。

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="http://placehold.jp/150x150.png" alt=""></li>
18                <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li>
19                <li><img src="http://placehold.jp/150x150.png" alt=""></li>
20                <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" 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/* slider-list→空の配列
30*  sliderClickCount→クリックしたときの初期の値
31*  btn→ボタンの引数
32*/
33$(function(){
34　　$(".slider-wrap").find(".slider-ctrl-btn").on("click",function(){
35        sliderDirection=$(this).data("ctrl");
36        slider(sliderDirection);
37    });
38
39    function slider(btn){
40        var sliderList=[];
41        var sliderClickCount=0;
42
43        for(i=0; i < $(".slider-list").find("img").length; i++){
44          sliderList[i]=-i*$(".slider-list").find("img").width()
45        }
46
47        switch(btn){
48            case"next":if(sliderClickCount<$(".slider-list").find("img").length-1){
49                sliderClickCount++
50            }else{
51                sliderClickCount=0
52            }
53            break;
54            case"prev":if(sliderClickCount!=0){
55                sliderClickCount--}else{
56                    sliderClickCount=$(".slider-list").find("img").length-1
57                }
58            break;
59            default:break
60        }
61        $(".slider-wrap").find(".slider-list").animate({left: sliderList[sliderClickCount]},500)
62    }
63});
64</script>
65</body>
66</html>

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; }

yambejp

2019/12/03 01:29

CSSが提示されていないので挙動が確認できません

退会済みユーザー

2019/12/03 01:32

CSS追記しました。大変失礼いたしました。

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

回答1件

ベストアンサー

最終型がよくわからないのでprev/nextで左右移動だけ

javascript
1<style>
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; }
37</style>
38<script type="text/javascript">
39$(function(){
40  var left=0;
41  var current=0;
42  $('.next').on('click',function(){
43    var w=$('.slider-list img').eq(current).width();
44    current++;
45    var len=$('.slider-list img').length;
46    if(current<len){
47      left-=w;
48      $('.slider-list').animate({left:left});
49    }else{
50      current=len-1;
51    }
52  });
53  $('.prev').on('click',function(){
54    var w=$('.slider-list img').eq(current).width();
55    current--;
56    if(current>=0){
57      left+=w;
58      $('.slider-list').animate({left:left});
59    }else{
60      current=0;
61    }
62  });
63});
64</script>
65<div class="wrapper">
66    <div class="slider-wrap">
67        <div class="slider-area">
68            <ul class="slider-list clearfix">
69                <li><img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1"></li>
70                <li><img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=2"></li>
71                <li><img src="https://placehold.jp/0000ff/ffff00/150x150.png?text=3"></li>
72                <li><img src="https://placehold.jp/000000/ffffff/150x150.png?text=4"></li>
73            </ul>
74            <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button>
75            <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button>
76        </div>
77    </div>
78</div>
79

最後の次は最初、最初の前は最後

javascript
1$(function(){
2  var left=0;
3  var current=0;
4  $('.next').on('click',function(){
5    var w=$('.slider-list img').eq(current).width();
6    var len=$('.slider-list img').length;
7    current++;
8    if(current<len){
9      left-=w;
10    }else{
11      left =0;
12      current=0;
13    }
14    $('.slider-list').animate({left:left});
15  });
16  $('.prev').on('click',function(){
17    var w=$('.slider-list img').eq(current).width();
18    var len=$('.slider-list img').length;
19    current--;
20    if(current>=0){
21      left+=w;
22    }else{
23      left=-$('.slider-list img:not(:last)').map(function(){
24        return $(this).width();
25      }).get().reduce((x,y)=>x+y);
26      current=len-1;
27    }
28    $('.slider-list').animate({left:left});
29  });
30});

投稿2019/12/03 02:01

編集2019/12/03 03:32

yambejp

総合スコア116661

退会済みユーザー

2019/12/03 02:28

ありがとうございます。最終型は4つ目の画像を右にクリックしたら１つ目の画像にスライドさせて、1つ目の画像を左にクリックしたら4つ目の画像にスライドする動作になります。左右の移動だけでもかなり大きいので、勉強になりました。

yambejp

2019/12/03 03:33 編集

一応追記しておきました画像をクリックするのでしょうか？prev/nextのクリックではいけないのでしょうか？

退会済みユーザー

2019/12/03 03:37

prev/nextのクリックで大丈夫です。ありがとうございます！動作も仕様書通りで、バッチリです。勉強になりました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

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

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

【jQuery】イベントバインドと処理を分けて実装したいです。

最後の次は最初、最初の前は最後

関連した質問