jQueryが反映されません

Question

実現したいこと

jQueryのスライダーを実装したいです

発生している問題・分からないこと

コードを書いたのですが、サイトに反映されません。
「スライダー作成」のところから下のコードが反応しません。

エラーメッセージ

エラーメッセージは出ません。

該当のソースコード

$(function () {
    // 1. AOSの初期化（ここに入れることでHTML読み込み後に実行される）
    AOS.init({
        offset: 100,      // 要素がどれくらい見えたら実行するか
        duration: 800,    // アニメーションの時間
        easing: 'ease-out',
        once: true        // 1回だけ実行
    });

    //スムーススクロール
    $("a[href^='#']:not([href='#'])").click(function () {
        var target = $($(this).attr("href")).offset().top;

        //70px減らす
        target -= 70;

        //ターゲットに移動
        $("html,body").animate({ scrollTop: target }, 500);
        return false;
    });

    //フォームバリデーション
    // 送信ボタンを変数に入れる
    const $submitBtn = $('.fv-submit-btn');

    // フォーム内の入力が変わるたびにチェック
    $('.fv-form input').on('change keyup', function () {
        // 各項目の値を取得
        let lastName = $('.fv-form input[placeholder="介護"]').val();
        let firstName = $('.fv-form input[placeholder="太郎"]').val();
        let company = $('.fv-form input[placeholder="株式会社CareSend"]').val();
        let email = $('.fv-form input[type="email"]').val();
        let tel = $('.fv-form input[type="tel"]').val();

        // すべてが空じゃないかチェック
        if (
            lastName !== "" &&
            firstName !== "" &&
            company !== "" &&
            email !== "" &&
            tel !== ""
        ) {
            // 全部入ってたらボタンを活性化
            $submitBtn.prop('disabled', false);
            $submitBtn.css('opacity', '1'); // 見た目も「押せる感」を出す
        } else {
            // 一つでも空ならボタンを無効化
            $submitBtn.prop('disabled', true);
            $submitBtn.css('opacity', '0.5'); // 押せないときは薄くする
        }
    });

    //ボタンのテキスト変更
    $('.fv-submit-btn').click(function () {
        $(this).css('font-size', '16px');
        $(this).html("資料ダウンロードありがとうございました");
    });

    // --- スライダー作成 ---
    var list = $('.logo-slider .slider-list');
    var item = $('.logo-slider .slider-item');

    // 1. 複製して2セットにする
    list.append(item.clone());

    $(window).on('load', function () {
        setTimeout(function () {
            // 2. 1枚分の移動距離を正確に測る
            var itemWidth = item.outerWidth(true);

            // 【確認用】F12のコンソールに数字が出るかチェック
            console.log('移動距離:', itemWidth);

            // 3. 画像を一枚分動かす関数
            function startScroll() {
                list.animate({ "marginLeft": -itemWidth }, 3000, "linear", function () {
                    // 4. アニメーション終了後、先頭の子供を特定
                    var target = list.find('.slider-item:first-child');

                    // 5. ターゲットを最後尾に移動（append）
                    list.append(target);

                    // 6. リストの左余白を0に戻す
                    list.css("marginLeft", 0);

                    // 7. ループ（自分自身をもう一度呼ぶ）
                    startScroll();
                });
            }

            // 8. 実行
            startScroll();
        });
    });
});

<!--スライダー-->
    <section class="logo-slider">
        <div class="inner">
            <h1 class="title" data-aos="fadeup">
                多くのお客様に選ばれ続けています
            </h1>
            <div class="img-area">
                <img src="images/jiseki 1.png" alt="実績の写真">
                <img src="images/jiseki-02 1.png" alt="実績の写真">
            </div>
            <!--スライダー-->
            <div class="slider-container">
                <ul class="slider-list">
                    <li class="slider-item"><img src="images/logo01.png" alt="社名"></li>
                    <li class="slider-item"><img src="images/logo02.png" alt="社名"></li>
                    <li class="slider-item"><img src="images/logo03 1.png" alt="社名"></li>
                    <li class="slider-item"><img src="images/logo04 1.png" alt="社名"></li>
                    <li class="slider-item"><img src="images/logo05 1.png" alt="社名"></li>
                </ul>
            </div>
        </div>
    </section>

/*スライダーセクション*/
.logo-slider {
    padding-top: 80px;
}

.logo-slider .inner {
    max-width: 1536px;
    width: 100%;
    margin: 0 auto;
}
.logo-slider .title {
    font-size: 32px;
    text-align: center;
    margin-bottom: 40px;
}

.logo-slider .img-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 84px;
    margin-bottom: 64px;
}

.logo-slider .img-area img{
    width: 428px;
    height: auto;
}

/*スライド設定*/
.logo-slider .slider-container {
    overflow: hidden;
    width: 100%;
}

.logo-slider .slider-list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    width: max-content; /* 中身のサイズを維持して横長に */
    min-width: 100%;    /* ★これを追加！ */
    position: relative; /* ★これもあると安心 */
}

.logo-slider .slider-item {
    width: 248px; /* 固定サイズ */
    height: 99px;
    flex-shrink: 0; /* 画面幅が狭くても画像を潰さない */
    margin: 0 40px; /* 隙間 */
    box-sizing: content-box;
}

.logo-slider .slider-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

Geminiやvscodeのaiに聞いても原因がわかりませんでした。

補足

数時間も格闘したので解決していただければ本当にありがたいです。よろしくお願いいたします。

Answer 1

以下のようにするとどうでしょうか。

            // $(window).on('load', function () { ←消す
            setTimeout(function () {
                // 2. 1枚分の移動距離を正確に測る
                var itemWidth = item.outerWidth(true);

                // 【確認用】F12のコンソールに数字が出るかチェック
                console.log('移動距離:', itemWidth);

                // 3. 画像を一枚分動かす関数
                function startScroll() {
                    list.animate({ "marginLeft": -itemWidth }, 3000, "linear", function () {
                        // 4. アニメーション終了後、先頭の子供を特定
                        var target = list.find('.slider-item:first-child');

                        // 5. ターゲットを最後尾に移動（append）
                        list.append(target);

                        // 6. リストの左余白を0に戻す
                        list.css("marginLeft", 0);

                        // 7. ループ（自分自身をもう一度呼ぶ）
                        startScroll();
                    });
                }

                // 8. 実行
                startScroll();
            });
            // }); ←消す