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