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

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

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

html
1<ul class="teacher-slider">
2        <div class="slider-inner">
3          <li>
4            <div class="teacher-item">
5              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-lidia.jpg" alt="Lidia">
6            </div>
7            <p>Lidia</p>
8          </li>
9          <li>
10            <div class="teacher-item">
11              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-erika.jpg" alt="Erika">
12            </div>
13            <p>Erika</p>
14          </li>
15          <li>
16            <div class="teacher-item">
17              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-joel.jpg" alt="Joel">
18            </div>
19            <p>Joel</p>
20          </li>
21          <li>
22            <div class="teacher-item">
23              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-sesin.jpg" alt="Sesin">
24            </div>
25            <p>Sesin</p>
26          </li>
27          <li>
28            <div class="teacher-item">
29              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-anastasios.jpg" alt="Anastasios">
30            </div>
31            <p>Anastasios</p>
32          </li>
33          <li>
34            <div class="teacher-item">
35              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-staci.jpg" alt="Staci">
36            </div>
37            <p>Staci</p>
38          </li>
39          <li>
40            <div class="teacher-item">
41              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-karen.jpg" alt="Karen">
42            </div>
43            <p>Karen</p>
44          </li>
45          <li>
46            <div class="teacher-item">
47              <img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/img-inst-mathias.jpg" alt="Mathias">
48            </div>
49            <p>Mathias</p>
50          </li>
51        </div>
52      </ul>

css
1.teacher-slider{
2  padding-left: 0;
3  width: 980px;
4  max-width: 100%;
5  margin: 0 auto;
6}
7
8.slider-inner{
9  height: 121px;
10  max-width: 100%;
11  margin: 0 auto;
12  padding: 0 40px;
13  text-align: center;
14}
15
16.teacher-slider .slick-slide img{
17  width: 100px;
18  height: 100px;
19  border-radius: 50%;
20  margin: 0 auto;
21  border: 4px solid #ff679a;
22}
23
24.slider-inner p{
25  font-size: 1.4rem;
26  font-weight: bold;
27}
28
29.slider-inner .slick-slide:not(.slick-center) img{
30  border: 2px solid #ddd;
31  width: 64px;
32  height: 64px;
33}
34
35.slider-inner .slick-slide:not(.slick-center){
36  width: 136px;
37  height: 85px;
38  outline: none;
39}
40
41.teacher-slider .prev-arrow{
42  position: absolute;
43  left: 0;
44  top: 10px;
45  height: 40px;
46  width: 40px;
47}
48
49.teacher-slider .next-arrow{
50  position: absolute;
51  right: 0;
52  top: 10px;
53  height: 40px;
54  width: 40px;
55}
56
57.teacher-slider .slide-arrow:hover{
58  cursor: pointer;
59  opacity: 0.8;
60}
61

Javascript
1<script type="text/javascript">
2jQuery(function(){
3      // teacher-slides
4      $(".teacher-comment").slick({
5        slidesToShow: 1,
6        slidesToScroll: 1,
7        speed: 500,
8        arrows: false,
9        fade: true,
10        asNavFor: ".slider-inner"
11      });
12
13      $(".slider-inner").slick({
14        dots: false,
15        infinite: true,
16        slidesToShow: 7,
17        slidesToScroll: 1,
18        variableWidth: true,
19        speed: 500,
20        asNavFor: ".teacher-comment",
21        centerMode: true,
22        focusOnSelect: true,
23        slide: "li",
24        prevArrow: '<img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/arrow-slide_l.png" class="slide-arrow prev-arrow">',
25        nextArrow: '<img src="https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/arrow-slide_r.png" class="slide-arrow next-arrow">'
26      });
27
28      });
29    </script>

m.ts10806

2020/03/03 08:54

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

m.ts10806

2020/03/03 08:55

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

Lhankor_Mhy

2020/03/07 01:46

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

ShoIso

2020/03/08 13:49

m.ts10806さん毎回的確な回答していただきありがとうございます。今回も無事に解決いたしました。ありがとうございました。 Lhankor_Mhyさん次エラーが起きたときは、エラーメッセージなどもしっかりと見てから質問するように心掛けます。ありがとうございました。

Lhankor_Mhy

2020/03/09 00:17

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

js
1    $("#inst-body").slick({
2        slidesToShow: 1,
3        slidesToScroll: 1,
4        speed: 500,
5        arrows: false,
6        fade: true,
7        asNavFor: "#inst-nav"
8    });
9    $("#inst-nav").slick({
10        dots: false,
11        infinite: true,
12        slidesToShow: 3,
13        slidesToScroll: 1,
14        variableWidth: true,
15        speed: 500,
16        asNavFor: "#inst-body",
17        centerMode: true,
18        focusOnSelect: true,
19        slide: "li"
20    });