jQuery スライダー　左のスライドボタンを連続で押した時の挙動について

###前提・実現したいこと
jQueryにてスライダーを作成しました。
3枚の写真が表示されていて、自動で一枚ずつ右に動いていきます。
左右のボタンにて手動で移動することも可能にしております。

問題なのは左方向へ移動するボタンを写真の枠が移動しきる前に連続で押した時に
クリックの速さで写真（枠の中）のみが切り替わってしまいます。

写真と写真の枠の移動を一致させるにはどのようにしたよいでしょうか。
（写真の枠が移動しきるまでは写真は切り替わらないようにしたい。）

###該当のソースコード

html
1<div class="items_wrap">
2                    <div class="prevBtn"><img src="/img/gp/prevBtn.png" alt="prev"></div>
3
4                    <div class="items clearfix">
5                        <ul>
6                            <li class="item item01">
7                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office01.png" alt="office01"></a></div>
8                            </li>
9
10                            <li class="item item02">
11                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office02.png" alt="office02"></a></div>
12                            </li>
13                            <li class="item item03">
14                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office03.png" alt="office03"></a></div>
15                            </li>
16
17                            <li class="item item04">
18                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office03.png" alt="office03"></a></div>
19                            </li>
20
21                            <li class="item item05">
22                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office02.png" alt="office03"></a></div>
23                            </li>
24
25                            <li class="item item06">
26                                <div class="shadow"><a href="#" target="_blank" class="accepging"><img src="/img/office01.png" alt="office03"></a></div>
27                            </li>
28                        </ul>
29                    </div>
30
31                    <div class="nextBtn"><img src="/img/gp/nextBtn.png" alt="" arrow02=""></div></div>

javascript
1$(function(){
2$itemContainer = $(".items");
3//スクロールのwrapの幅を設定
4var $items = $(".items ul li");
5$(".items ul").css({width: $items.outerWidth(true) * $items.length});
6
7// スクロールの方向 -1の時には左、1の時には右
8var dir = -1;
9
10// スクロールのインターバル
11var interval = 3500;
12
13// スクロールのスピード
14var duration = 600;
15
16// タイマー用の変数
17var timer;
18
19// SlideTimer();
20timer = setInterval(slideTimer, interval);
21
22function slideTimer(){
23if(dir == -1){
24	//＜ー
25    $(".items ul").animate({"left" : "-=340px" }, duration,"easeInOutQuart", function(){
26		var $target = $(".items ul li:first");
27		$(this).append($target);
28		$(this).css("left", 0);
29		$(".items ul").clearQueue();
30	});
31}else{
32	//ー＞
33	var $target = $(".items ul li:last");
34	$(".items ul").prepend($target);
35	$(".items ul").css({'left': -340}).animate({"left" : 0 }, duration, function(){
36
37		dir = -1;
38		$(".items ul").clearQueue(); 
39	});
40}
41}
42
43// 前へボタン
44    $(".prevBtn").clearQueue().click(function(){
45// スクロール方向の切り替え（右）
46dir = 1;
47
48
49// タイマーを停止して再スタート
50clearInterval(timer);
51timer = setInterval(slideTimer, interval);
52
53// 初回の関数実行
54slideTimer();
55});
56$(this).clearQueue(); 
57// 次へボタン
58$(".nextBtn").stop(true).click(function(){
59// スクロール方向の切り替え（左）
60dir = -1;
61clearInterval(timer);
62timer = setInterval(slideTimer, interval);
63
64slideTimer();
65});
66});

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

回答1件

自己解決

javascript
1$(function(){
2$itemContainer = $(".items");
3//スクロールのwrapの幅を設定
4var $items = $(".items ul li");
5$(".items ul").css({width: $items.outerWidth(true) * $items.length});
6
7// スクロールの方向 -1の時には左、1の時には右
8var dir = -1;
9
10// スクロールのインターバル
11var interval = 3500;
12
13// スクロールのスピード
14var duration = 600;
15
16// タイマー用の変数
17var timer;
18
19var isChange = false;
20    
21    
22function startTimer(){
23    if(timer) clearInterval(timer);
24//    timer = setInterval(slideTimer, interval);    
25}
26    
27// SlideTimer();
28startTimer();
29
30function slideTimer(){
31//    console.log(dir);
32if(dir == -1){
33	//＜ー
34    
35    if(isChange) return;
36    
37    isChange = true;
38    $(".items ul").animate({"left" : "-=340px" }, duration,"easeInOutQuart", function(){
39        isChange = false;
40		var $target = $(".items ul li:first");
41		$(this).append($target);
42		$(this).css("left", 0);
43//		$(".items ul").clearQueue();
44	});
45}else{
46	//ー＞
47    if(isChange) return;
48    
49    var $target = $(".items ul li:last");
50    $(".items ul").prepend($target);
51    $(".items ul").css({"left":-340});
52    
53//    $(this).css("left", 0);
54//    $(".items ul").clearQueue();
55    isChange = true;
56    
57    $(".items ul").animate({"left" : "+=340px" }, duration,"easeInOutQuart", function(){
58        $(this).css("left", 0);
59        isChange = false;
60    });
61
62    
63    /*
64	var $target = $(".items ul li:last");
65	$(".items ul").prepend($target);
66	$(".items ul").css({'left': -340}).animate({"left" : 0 }, duration, function(){
67
68		dir = -1;
69		$(".items ul").clearQueue(); 
70	});
71    
72    */
73}
74}
75
76    // 前へボタン
77    $(".prevBtn").clearQueue().click(function(){
78        // スクロール方向の切り替え（右）
79        dir = 1;
80
81        // タイマーを停止して再スタート
82        startTimer();
83//        clearInterval(timer);
84//        timer = setInterval(slideTimer, interval);
85
86        // 初回の関数実行
87        slideTimer();
88    });
89    
90//    $(this).clearQueue(); 
91
92    // 次へボタン
93    $(".nextBtn").stop(true).click(function(){
94        // スクロール方向の切り替え（左）
95        dir = -1;
96        startTimer();
97//        clearInterval(timer);
98//        timer = setInterval(slideTimer, interval);
99        
100        slideTimer();
101    });
102    
103    //page scroll
104    var ease = "easeInOutQuint";
105    var dr = 800;
106    for (var i = 1; i <= 5; i++) {
107        var target;
108        if ($(".subnav0" + i).data()) {
109            $(".subnav0" + i).data().id = i;
110            $(".subnav0" + i).click(function () {
111                var id = $(this).data().id;
112                if (id === 1) target = ".wrap01";
113                else if (id === 2) target = ".wrap02";
114                else if (id === 3) target = ".wrap03";
115                else if (id === 4) target = ".wrap04";
116                else target = ".wrap05";
117                //            console.log(id, target);
118                $("html,body").animate({
119                    "scrollTop": $(target).offset().top-100
120                }, dr, ease);
121            });
122        }
123    };
124});
125