常連

### 実現したいこと
slick sliderで左右のボタンを押すとli要素がスライドする仕様にしたいです。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-02-22/7b0d1777-5c3f-444d-bdde-d624859aa41c.png)

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-02-22/fed22bf6-fa0c-427a-bfd9-0ddce7ef9f72.png)

### 発生している問題・分からないこと
スライダーになっておらず、横スライドもボタンを押してもスライドができません。
同じページ内でslick sliderを使っている部分がありますがそちらは動いています。




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

```php
<section class="c-feedback">
    <div class="l-section">
        <header class="anime-fadeInBottom">
            <h1 class="heading__Lv1-main t-tCenter">タイトル</h1>
            <p class="heading__Lv6 t-tCenter">コメント</p>
        </header>
        <div class="ol-column-wrapper">
            <div class="c-feedback-slider" id="feedback-slider">
                <div class="slick-slider">
                    <ol class="ol-column">
                        <?php if (have_rows('r_review_field')) : ?>
                            <?php while (have_rows('r_review_field')) : the_row(); ?>
                                <?php
                                $image = get_sub_field('r_review_phot');
                                $syokusyu = get_sub_field('r_review_syokusyu');
                                $text = wp_kses_post(get_sub_field('r_review_tex')); // テキストをエスケープ
                                ?>
                                <li class="li-column">
                                    <div class="photaria">
                                        <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                                    </div>
                                    <div class="need_container">
                                        <div class="needsBox">
                                            <span class="r_syokusyu heading__Lv5 t-stripe_yellow t-center"><?php echo esc_html($syokusyu); ?></span>
                                        </div>
                                    </div>
                                    <p class="heading__Lv7"><?php echo $text; ?></p>
                                </li>
                            <?php endwhile; ?>
                        <?php endif; ?>
                        <div class="l-container c-feedback-slider-arrows" id="js-feedback-arrow">
                    <div class="prev-arrow">Previous</div>
                    <div class="next-arrow">Next</div>
                </div>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</section>
```

```jQuery
"use strict";

jQuery(function($) {
    var maxAttempts = 5;
    var currentAttempt = 0;

    function initializeSlider(feedbackSlider) {
        var initialized = false;
        var $slider = $(feedbackSlider).find(".ol-column");

        var observer = new MutationObserver(function(mutationsList) {
            mutationsList.forEach(function(mutation) {
                if (mutation.type === 'childList' && mutation.addedNodes.length > 0 && !initialized) {
                    $slider.find("> *:not(.li-column)").remove();
                    $slider.slick("unslick");
                    $slider.slick({
                        autoplay: false,
                        accessibility: true,
                        pauseOnFocus: true,
                        dots: false,
                        arrows: true,
                        prevArrow: $(feedbackSlider).find(".prev-arrow"),
                        nextArrow: $(feedbackSlider).find(".next-arrow"),
                        infinite: true,
                        autoplaySpeed: 2000,
                        speed: 500,
                        variableWidth: true,
                        slidesToScroll: 1,
                        centerMode: true,
                        slidesToShow: 4
                    });

                    $(feedbackSlider).find(".next-arrow").click(function() {
                        $slider.slick('slickNext');
                    });
                    $(feedbackSlider).find(".prev-arrow").click(function() {
                        $slider.slick('slickPrev'); 
                    });

                    initialized = true;
                }
            });
        });

        var observerOptions = { childList: true, subtree: true, characterData: true };
        observer.observe(feedbackSlider, observerOptions);
    }

    function attemptInitialize() {
        $(".c-feedback-slider").each(function() {
            initializeSlider(this);
        });

        currentAttempt++;
        if (currentAttempt < maxAttempts) {
            setTimeout(attemptInitialize, 1000); 
        }
    }

    attemptInitialize();
});

```

```css
.c-feedback {
    background-color: #4361ac;
    color: #fff;

    .anime-fadeInBottom {
        padding: 0 5%;

        .heading__Lv7 {
            word-break: strict;
        }
    }

    .ol-column-wrapper {
        opacity: 1;

        .ol-column {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: hidden;
            padding: 0;
            margin: 0;
            color: #222;

            .li-column {
                transform: scale(0.85);
                flex: 0 0 auto;
                box-sizing: border-box;
                background-color: #fff;
                border-radius: 50vw 50vw 0 0;
                aspect-ratio: 1/1.25;
                min-width: 200px;
                max-width: 400px;

                .photaria {
                    width: 80%;
                    margin: 20px auto;
                    padding: 0 20%;
                }
            }

            .prev-arrow,
            .next-arrow {
                cursor: pointer;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 100;
                background-color: rgba(255, 255, 255, 0.5);
                padding: 10px;
                border-radius: 5px;
                color: #333;
                font-weight: bold;
            }

            .prev-arrow {
                content: "←";
                left: 10px;
            }

            .next-arrow {
                right: 10px;
            }
        }

        .need_container {
            margin-bottom: 10px;
            text-align: center;
        }
    }

    p {
        margin: 10px 5%;
        line-height: normal;

        .heading__Lv7 {
            word-break: break-all;
            overflow-wrap: break-word;
        }
    }

    header {
        margin-bottom: 20px;
        position: relative;

        &::after {
            content: "";
            display: block;
            max-width: 500px;
            width: 30%;
            aspect-ratio: 499/222;
            background: url(../images/lp/faq.png) center no-repeat;
            background-size: contain;
            position: absolute;
            left: 430px;
            top: -120px;
            z-index: -1;

            @include mqMaxNum(1024px) {
                left: 356px;
                top: -92px;
            }

            @include mqMaxNum(768px) {
                left: 267px;
                top: -68px;
            }

            @include mqMaxNum(426px) {
                left: 150px;
                top: -38px;
            }

            @include mqMaxNum(376px) {
                left: 130px;
            }

            @include mqMaxNum(320px) {
                left: 92px;
                width: 130px;
                top: -43px;
            }
        }
    }
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
ol要素のSCSSによってol直下にスクロールバーが出ていたため
overflow-x: auto;   から overflow-x: hidden;　に変更しました。

その結果余分なスクロールバーは消えましたが、li要素のスクロールができなくなりました。
ボタンでのスクロールは変更前でも後でも何も変化がありませんでした。
          

### 補足
【同じページ内別の場所で動作確認済みのコードです】
■PHP
<div class="lp__pickup-list">
            <div class="porters__pickup" id="js-pickup-list">
                <script type="text/javascript" src="https://app-webpartshrbc.porterscloud.com/po-b.js" data-template-id="<?= $templateId2 ?>"></script>
                <script type="porters/webparts"></script>
            </div>
        </div>


slick sliderが実装できません、同じページにもう一つスライダーがあることが原因でしょうか？

### 実現したいこと

- スプレッドシートからChatworkに自動通知させたいです。
- 毎日9～10時をトリガー自動で実行する仕様にしています。
- スプレッドシートE列に入れた実行予定日に基づいて通知を行います。
- E列に入れた実行予定日の1日前び実行日のとき「前日通知」の文章を送る
- E列に入れた実行予定日と同じ実行日のとき「当日通知」の文章を送る
- E列に入れた実行予定日が土日の場合はその前の平日の実行日のとき「事前通知」の文章を送る

### 前提

GASでスプレッドシートからChatworkに自動通知するプログラムを組んでいます。
以下の条件分岐をさせて通知を行いたいのですが、前日通知が送られません。

- E列に入れた実行予定日の1日前び実行日のとき「前日通知」の文章を送る
- E列に入れた実行予定日と同じ実行日のとき「当日通知」の文章を送る
- E列に入れた実行予定日が土日の場合はその前の平日の実行日のとき「事前通知」の文章を送る

スプレッドシートは以下の構成です
実行している日は2023/05/09です

N0.	||ルームID	||通知タイトル	||投稿内容	||通知トリガー	||実行日時（前日）||	実行日時（当日）
N0.	||ルームID	||通知タイトル	||投稿内容	||2023/05/09 ||	||	13:17:29
N0.	||ルームID	||通知タイトル	||投稿内容	||2023/05/10 ||	||	
N0.	||ルームID	||通知タイトル	||投稿内容	||2023/05/11 ||	||	

### 発生している問題・エラーメッセージ

```
エラーはないのですが、前日通知のIF文に引っかからないようで困っています。
```

### 該当のソースコード
```
function sendExpenseNotification() {
  // スプレットシート読み込み
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName('自動通知');
  const lastRow = sheet.getLastRow();

  // ChatWorkAPIクライアント作成
  const client = ChatWorkClient.factory({ token: token }); 

  // 現在の日付と時刻を取得
  const today = new Date();

  // スプレッドシートに記載がある分だけ繰り返す
  for (var i = 2; i <= lastRow; i++) {
    const [roomId, messageItem, message] = sheet.getRange(i, 2, 1, 3).getValues()[0]; // B列からD列までの値をまとめて取得
    const reservationDate = new Date(sheet.getRange(i, 5).getValue()); // E列投稿日

    // 前日の場合、メッセージ送信
    if (isPreviousDay(reservationDate, today)) {
      const prevDateMsg = `※連絡※【明日は${messageItem}です】\n${message}`;
      client.sendMessage({
        room_id: roomId,
        body: prevDateMsg
      });
    
      // 前日通知実行日時の記録
      sheet.getRange(i, 6).setValue(today);
    } else {
      // 当日の場合、メッセージ送信
      if (isToday(reservationDate, today)) {
        const todayMsg = `※連絡※【本日は${messageItem}です】\n${message}`;
        client.sendMessage({
          room_id: roomId,
          body: todayMsg
        });
    
        // 当日通知実行日時の記録
        sheet.getRange(i, 7).setValue(today);
      }
    }

    // 休日ではなく前日の場合、メッセージ送信
    if (!isWeekend(reservationDate) && isPreviousDay(reservationDate, today)) {
      const prevDateMsg = `※連絡※【明日は${messageItem}です】\n${message}`;
      client.sendMessage({
        room_id: roomId,
        body: prevDateMsg
      });

      // 前日通知実行日時の記録
      sheet.getRange(i, 6).setValue(today);
    }

    // 休日の場合、前の平日に投稿する
    if (isWeekend(reservationDate) && isSameMonth(reservationDate, today) && reservationDate < today) {
      const prevWeekday = getPreviousWeekday(reservationDate);
      const prevWeekdayMsg = `※連絡※【${messageItem}につきまして】当日は休日のため、前営業日の(${prevWeekday.getMonth() + 1}月${prevWeekday.getDate()}日)に投稿いたします。\n${message}`;
      client.sendMessage({
        room_id: roomId,
        body: prevWeekdayMsg
      });

      // 休日通知実行日時の記録
      sheet.getRange(i, 6).setValue(today);
      sheet.getRange(i, 7).setValue(today);
    }
  }
}


// 2つの日付が同じ日付かどうかを判定する関数
function isSameDate(date1, date2) {
  return (
    date1.getFullYear() === date2.getFullYear() &&
    date1.getMonth() === date2.getMonth() &&
    date1.getDate() === date2.getDate()
  );
}

// 指定された日付が当日かどうかを判定する関数
function isToday(dateToCheck, currentDate) {
  return isSameDate(dateToCheck, currentDate);
}

// 指定された日付が前日かどうかを判定する関数
function isPreviousDay(dateToCheck, currentDate) {
  const previousDate = new Date(currentDate);
  previousDate.setDate(previousDate.getDate() - 1);
  return isSameDate(dateToCheck, previousDate);
}

// 指定された日付が平日（土日でない）かどうかを判定する関数
function isWeekday(dateToCheck) {
  const day = dateToCheck.getDay();
  return day !== 0 && day !== 6; // 0が日曜、6が土曜
}

// 指定された日付が土曜日または日曜日かどうかを判定する関数
function isWeekend(dateToCheck) {
  const day = dateToCheck.getDay();
  return day === 0 || day === 6; // 0が日曜、6が土曜
}

// 2つの日付が同じ月かどうかを判定する関数
function isSameMonth(date1, date2) {
  return date1.getMonth() === date2.getMonth();
}

// 指定された日付の前の平日（土日を除く前の日）を取得する関数
function getPreviousWeekday(dateToCheck) {
  const previousDate = new Date(dateToCheck);
  previousDate.setDate(previousDate.getDate() - 1);

  while (!isWeekday(previousDate)) {
    previousDate.setDate(previousDate.getDate() - 1);
  }

  return previousDate;
}
```

```ここに言語名を入力
GAS
```

### 試したこと

console.logなどで見てみましたが、日付は読み取っています
通知も当日通知はchatworkに届きました

### 補足情報（FW/ツールのバージョンなど）
なし

