ボタンで画像を変更するスライドショーを作りたい

Question

実現したいこと

jQueryでボタンクリックで画像を変更できるスライドショーを作成しています。
スライドの関数を作り、イベントの中で関数に引数として値を投げているイメージです。
if文で「pres」「next」を判別しています。
関数名、引数名は仮名です。

＜追記＞
一部修正しました。関数内に変数を閉じ込めると関数実行の度に変数が宣言され、値がリセットされてしまっていると考え、クロージャにて再度実装しました。

発生した問題・解決したい問題

変数を関数スコープかイベントの中に閉じ込めたいのですが、イベント内・関数内に閉じようとしたらうまく動作しない。
関数・イベントの外で宣言したら動作しました。
おかしいところのアドバイスを頂きたいです。

＜追記＞
クロージャにて一部コード修正しましたが、機能しません。
クロージャの扱いが間違っているのか、その他の要因があるのか、アドバイスを頂きたいです。

<div class="slider-area">
  　<ul class="slider-list clearfix">
       <li><img src="img/1.jpg" alt=""></li>
       <li><img src="img/2.jpg" alt=""></li>
       <li><img src="img/3.jpg" alt=""></li>
       <li><img src="img/4.jpg" alt=""></li>
    </ul>
    <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button>
    <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button>
</div>

$(function(){
/**
 *スライド全体を横に移動させる
 *左端までいくと最後の画像に移動する
 *右端までいくと最初の画像に戻る
 *
 *@param {num} current : 現在地の増減
 */
function slideShow(){
    let slideWidth = $('.slider-list').find('li').width(),
    slideNum = $('.slider-list').find('li').length,
    slideListWidth = slideWidth * slideNum,
    slideCurrent = 0,
    myObj = new Object();
    /**
 *スライド全体の幅を挿入する
 */
    $('.slider-list').css('width',slideListWidth);
    myObj.slideFunc = function (current){
        current;
        if(slideCurrent < 0){
            slideCurrent = slideNum -1;
        }
        else if(slideCurrent > slideNum -1){
            slideCurrent = 0;
        }
        $('.slider-list').animate({
            left : slideCurrent * -slideWidth
        });
    }
    myObj.getCurrent = function (){
        return slideCurrent;
    }
    return myObj;
}
let slideCount = slideShow();

/**
 *クリックイベント
 *ボタンクリックで進む・戻る
 */
$('.slider-area').find('button').on('click',function(){
    let currentCount = slideCount.getCurrent();
    if($(this).hasClass('next')){
        slideCount.slideFunc(currentCount++)
    }
    else{
        slideCount.slideFunc(currentCount--)
    }
});
});

Comments

[2KOH]

> グローバル変数が使用不可のため
そもそも「動作する」というコードにもグローバル変数なんて宣言されていない（正確には $ が定義されていますが）ので、「動作する」というコードで何も問題ないのでは？

[onigiri-sake]

すみませんグローバル変数の解釈を間違えておりました。
関数スコープかイベントの中に閉じ込めたい、という意味合いでの質問でした。
勉強不足により情報が曖昧で申し訳ございません。

[2KOH]

「動作する」というコードはすでに関数スコープですよ？

これではダメというのであれば、
$(function(){
(function(){
// ここにすべてのコードを書く。
})();
});
のようにするのはどうですか？
こんなことをする意味は何もないですが。

[onigiri-sake]

なるほど。。。
今一度仕様を確認してみます。
ご丁寧にありがとうございます！

Answer 1

https://teratail.com/help/avoid-asking
どう見てもこのサイトで推奨されていない「デバッグしてください等の丸投げの質問」のように思えるので、簡単にだけ。

myObj.slideFunc = function (current){
	current;

を

myObj.slideFunc = function (current){
	slideCurrent = current;

に変更し、

if($(this).hasClass('next')){
	slideCount.slideFunc(currentCount++)
}
else{
	slideCount.slideFunc(currentCount--)
}

を

if($(this).hasClass('next')){
	slideCount.slideFunc(++currentCount)
}
else{
	slideCount.slideFunc(--currentCount)
}

に変更してください。

Comments

[onigiri-sake]

回答頂きありがとうございます！
たしかにサイトの主旨に適さない質問でした。失礼しました。
以後気を付けます。