slickでの2枚スライドの実装の仕方がわからない

Question

実現したいこと

画像ではないスライドを2枚をslickでレスポンシブに対応するように2枚ずつスライドできるように実装したい

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

PCサイズだと問題ないが、画面サイズを880px以下した際にスライドが途中で切れてしまう形になってしまう。
880px以下の画面でもスライドサイズが自動で縮小して、2スライド分が収まっているようにコーディングしたい。

該当のソースコード

      <section class="introductionExample">
        <div class="introductionInner">
          <h2>導入事例</h2>
          <div class="exampleInner">
            <div class="slider">
              <div class="slider-item slider-item01">
                <h3>
                  慢性的な介護士不足が解決し、
                  <span>優秀な人材</span>が確保できるように！
                </h3>
                <p>
                  「CareSend」の登場で、慢性的な介護士不足に頭を抱える問題が解消しました。優秀な介護スタッフが手軽に利用できるため、施設の運営が安定し、利用者のケアに集中できるようになりました。登録型派遣と紹介予定派遣の両方が選択肢として用意され、利用者のニーズに応えることができるのが素晴らしいです。<br>
                  またプラットフォーム上の登録介護士は、私達が普通に採用していたら絶対に巡り会えなかったであろうリーダー人材にも巡り会えましたので、とても満足しています。
                </p>
                <img class="case01" src="img/case01.png" alt="">
              </div>
              <div class="slider-item slider-item02">
                <h3>
                  急な欠員補充から<span>正社員雇用</span>に繋がり、大変助かっています。
                </h3>
                <p>
                  「CareSend」に急なニーズでも対応可能な介護士さんが登録されていることは、本当に心強かったです。その中でも、派遣していただいた介護士さんはとても素晴らしく、紹介予定派遣を経て正社員として採用することになりました。当該介護士の存在は施設全体にとって大きな価値を持っています。<br>
                  今後も積極的に正社員登用を考えておりますので、良い介護士に恵まれることを祈りつつ、利用をさせていただきます。
                </p>
                <img class="case02" src="img/case02.png" alt="">
              </div>
              <div class="slider-item slider-item03">
                <h3>
                  <span>ケアの質が向上！</span> CareSendで利用者満足度も上昇！
                </h3>
                <p>
                  当施設では、長らく介護士不足に悩まされてきました。ある日、急な欠員が発生し、<br>
                  困り果てていた時に、CareSendを利用することにしました。登録型派遣で急遽派遣してもらった介護士は、驚くほどのプロ意識と思いやりを持ち、施設内での業務をスムーズにこなしてくれました。その後、彼女は紹介予定派遣を経て正式に採用され、施設の一員として活躍しています。彼女の尽力により、施設の雰囲気は一変し、利用者の満足度も大幅に向上しました。
                </p>
                <img class="case03" src="img/case03.png" alt="">
              </div>
              <div class="slider-item slider-item04">
                <h3>
                  <span>派遣介護士の質</span>が高く、とても驚きました。
                </h3>
                <p>
                  私たちの施設は、長年にわたり正社員だけで運営してきました。派遣の利用は考えたこともありませんでしたが、ある日、急な人手不足に悩まされ、"CareSend"を試してみることにしました。派遣された介護士は、私たちの期待をはるかに超える素晴らしい仕事ぶりでした。プロ意識や親切さに感動し、施設内の雰囲気が一変しました。<br>
                  私たちは派遣介護士の活用に新たな可能性を見出し、今後は更にその先の「採用」につなげていきたく思っています。
                </p>
                <img class="case04" src="img/case04.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </section>

.introductionExample {
    width: 100%;
    background-color: #FFFFFF;
    .introductionInner {
        max-width: 1024px;
        height: 664px;
        margin: 0 auto;
        h2 {
            font-size: clamp(1.5rem, 1.312rem + 0.72vw, 2rem);
            text-align: center;
            margin-top: 96px;
        }
        .exampleInner {
            width: 100%;
            margin: 73px 0 49px;
            .slider {
                width: 100%;
                height: auto;
                padding: 0 72px;
                display: flex;
                .slick-list {
                    padding: 20px;
                    width: 950px;
                    margin: -20px;
                }
                .slider-item {
                    width: 405px;
                    height: 488px;
                    margin: 0 35px;
                    padding: 32px 20px 0;
                    border-radius: 30px 0px 30px 0px;
                    box-shadow: 0px 5px 8px 3px #33333340;
                    position: relative;
                    h3 {
                        font-size: clamp(1.125rem, 0.984rem + 0.54vw, 1.5rem);
                        line-height: 1.8;
                        span {
                            color: #007FC6;
                        }
                    }
                    p {
                        font-size: clamp(0.75rem, 0.703rem + 0.18vw, 0.875rem);
                        line-height: 1.8;
                        font-weight: 400;
                        padding: 24px 0 119px;
                    }
                    .case01 {
                        width: 164px;
                        height: 64px;
                    }
                    .case02 {
                        width: 64px;
                        height: 64px;
                    }
                    .case03 {
                        width: 81px;
                        height: 81px;
                    }
                    .case04 {
                        width: 164px;
                        height: 65px;
                    }
                    img {
                        position: absolute;
                        left: 20px;
                        bottom: 20px;
                    }
                }
                .slick-prev,.slick-next {
                    position: absolute;/*絶対配置にする*/
                    z-index: 3;
                    top: 46.5%;
                    height: 34px;
                    width: 34px;
                }
                .slick-prev {
                    left:1.8%;
                    img {
                        width: 34px;
                        height: 34px;
                    }
                }
                .slick-next {
                    right:1.8%;
                    img {
                        width: 34px;
                        height: 34px;
                    }
                }
            }
        }
    }
}

    $('.slider').slick({
		autoplay:false,
		infinite: true,
		variableWidth: true,
		slidesToShow: 2,
		slidesToScroll: 2,
		prevArrow: '<div class="slick-prev"><img src="img/arrow-01.png"></div>',//矢印部分PreviewのHTMLを変更
		nextArrow: '<div class="slick-next"><img src="img/arrow-02.png"></div>',//矢印部分NextのHTMLを変更
    });

試したこと・調べたこと

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

上記の詳細・結果

スライドが切れる現象を解消できませんでした。

補足

特になし

Answer 1

ご提示のコードでは、

.slick-list {
    padding: 20px;
    width: 950px;

となっていますから、そもそも950pxより小さくはならないはずです。
どういう意図で950pxを指定しているのか、レイアウトをよく見直されるのがいいかと思います。
なんとなくですが、あえてはみだし表現を意図しているコードのように見えますので、このコードを書いた方に相談してみてはどうでしょうか。

---

もし、この950pxを消してよければ、以下のよう感じではないでしょうか。

.slick-list {
    padding: 20px;
    /* width: 950px; 消す */
    margin: -20px;
}

.slider-item {
    /* width: 405px; 以下のように変更 */
    width: calc((min(100vw, 1024px) - (35px + 20px) * 4 - 72px * 2) / 2);