LPサイトのスライダーの設置をしたい。

Question

現在こちらのLPの模写をしているのですが、下の画像のスライダーの仕組みが理解できずに止まってしまっています。スライダーのプラグインは、「slick」が使われているようなのですが、下の画像のようなスライダーの設定がなく、どのように設計していいのかわかりません。どなたかアドバイスしていただけると幸いです。

追記
見た目だけはできたのですが、一つ移動すると、止まってしまいます。slickのオプションでfocusOnSelect: trueを使用しているので、クリックして移動してみたのですが、一つ移動すると、他のものに移動できなくなってしいます。また、移動するとセンターが移動したことになっているのですが、その要素が中央にこないです。

<ul class="teacher-slider">
        <div class="slider-inner">
          <li>
            <div class="teacher-item">
              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-lidia.jpg" alt="Lidia">
            </div>
            <p>Lidia</p>
          </li>
          <li>
            <div class="teacher-item">
              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-erika.jpg" alt="Erika">
            </div>
            <p>Erika</p>
          </li>
          <li>
            <div class="teacher-item">
              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-joel.jpg" alt="Joel">
            </div>
            <p>Joel</p>
          </li>
          <li>
            <div class="teacher-item">
              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-sesin.jpg" alt="Sesin">
            </div>
            <p>Sesin</p>
          </li>
          <li>
            <div class="teacher-item">
              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-anastasios.jpg" alt="Anastasios">
            </div>
            <p>Anastasios</p>
          </li>
          <li>
            <div class="teacher-item">
              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-staci.jpg" alt="Staci">
            </div>
            <p>Staci</p>
          </li>
          <li>
            <div class="teacher-item">
              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-karen.jpg" alt="Karen">
            </div>
            <p>Karen</p>
          </li>
          <li>
            <div class="teacher-item">
              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-mathias.jpg" alt="Mathias">
            </div>
            <p>Mathias</p>
          </li>
        </div>
      </ul>

.teacher-slider{
  padding-left: 0;
  width: 980px;
  max-width: 100%;
  margin: 0 auto;
}

.slider-inner{
  height: 121px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.teacher-slider .slick-slide img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
  border: 4px solid #ff679a;
}

.slider-inner p{
  font-size: 1.4rem;
  font-weight: bold;
}

.slider-inner .slick-slide:not(.slick-center) img{
  border: 2px solid #ddd;
  width: 64px;
  height: 64px;
}

.slider-inner .slick-slide:not(.slick-center){
  width: 136px;
  height: 85px;
  outline: none;
}

.teacher-slider .prev-arrow{
  position: absolute;
  left: 0;
  top: 10px;
  height: 40px;
  width: 40px;
}

.teacher-slider .next-arrow{
  position: absolute;
  right: 0;
  top: 10px;
  height: 40px;
  width: 40px;
}

.teacher-slider .slide-arrow:hover{
  cursor: pointer;
  opacity: 0.8;
}

<script type="text/javascript">
jQuery(function(){
      // teacher-slides
      $(".teacher-comment").slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 500,
        arrows: false,
        fade: true,
        asNavFor: ".slider-inner"
      });

      $(".slider-inner").slick({
        dots: false,
        infinite: true,
        slidesToShow: 7,
        slidesToScroll: 1,
        variableWidth: true,
        speed: 500,
        asNavFor: ".teacher-comment",
        centerMode: true,
        focusOnSelect: true,
        slide: "li",
        prevArrow: '<img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/arrow-slide_l.png" class="slide-arrow prev-arrow">',
        nextArrow: '<img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/arrow-slide_r.png" class="slide-arrow next-arrow">'
      });

      });
    </script>

Comments

[m.ts10806]

slickで何がしたいのでしょう。
リンクも提示されていますしドキュメントの存在はご存じということですよね。そこでわからないところはどこですか？

[m.ts10806]

また、画像だけ提示されても何をしようとしているか、どこで詰まっているか汲み取ることはできません。
自身が今書かれているコードをご提示ください。
というよりslickだけ単体で動かすコードを別途作った方が良いのでは？

[Lhankor_Mhy]

エラーメッセージや実行ログをコピー&ペーストしましょう
https://teratail.com/help/question-tips#questionTips3-4-2

[ShoIso]

m.ts10806さん
毎回的確な回答していただきありがとうございます。今回も無事に解決いたしました。ありがとうございました。

Lhankor_Mhyさん
次エラーが起きたときは、エラーメッセージなどもしっかりと見てから質問するように心掛けます。ありがとうございました。

[Lhankor_Mhy]

ご解決されて何よりです。

Answer 1

どこで詰まっているのかわかりませんが、とりあえず、ソースコードに書かれているものを丸パクリするところから始めてみてはいかがですか？

    $("#inst-body").slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 500,
        arrows: false,
        fade: true,
        asNavFor: "#inst-nav"
    });
    $("#inst-nav").slick({
        dots: false,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        variableWidth: true,
        speed: 500,
        asNavFor: "#inst-body",
        centerMode: true,
        focusOnSelect: true,
        slide: "li"
    });

「模写なのでコピペは反則」というルールでやってらっしゃるならば、この回答は見なかったことにしてください。

質問追記に合わせて追記

一つ移動すると、止まってしまいます。

//    asNavFor: ".teacher-comment",

↑ここの部分をコメントアウトすると動作しました。
.teacher-commentが存在しないため、エラーになっているのだと思います。

Comments

[ShoIso]

Lhankor_Mhyさん
回答ありがとうございました。.teacher-commentの部分を消したら思ったとおりに動作し、無事に解決しました。何度も回答していただき本当にありがとうございました。