slickの表示が上手くいかず困っています

前提・実現したいこと

jQueryのプラグイン「slick」を使い、下のようなスライダーを実装させたいと思っています。

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

表示はされていて、動くことは動くのですが、

①スクロールがカクカクしており、スムーズではありません

②一枚ごとにスクロールされるのではなくカード全体で動いてしまいます。
例）li タグを３つ作ったら３つくっついて動いてしまう。

③最後のカードの表示が終わったらカードが表示がされなくて（画面からカードが消える）何回かスクロールしたらまた出てくる

デバックを確認しましたが、エラーは出ていませんでした。

該当のソースコード（すみません長くなってしまいます。）

HTML
1    <div class="graduateSec__itemsWrapper">
2      <ul class="graduateSec__items js__graduateSecSlider">
3  
4        <li class="graduateSec__item">
5          <div class="graduateSec__item__imgWrapper">
6            <div class="graduateSec__item__img">
7              <img src="./images/sample.jpg" alt="自信がありそうな女性">
8            </div><!-- /.graduateSec__item__img -->
9  
10            <div class="graduateSec__item__details">
11              <p class="graduateSec__item__school">
12                テキスト        
13              </p><!-- /.graduateSec__item__school -->
14              <p class="graduateSec__item__name">
15                テキスト
16              </p><!-- /.graduateSec__item__name -->
17            </div><!-- /.graduateSec__item__details -->
18          </div><!-- /.graduateSec__item__imgWrapper -->
19  
20          <div class="graduateSec__item__textWrapper">
21            <p class="graduateSec__item__text">
22              テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
23            </p><!-- /.graduateSec__item__text -->
24          </div><!-- /.graduateSec__item__textWrapper -->
25  
26          <button class="graduateSec__button">
27            <i class="fas fa-arrow-right"></i>
28          </button><!-- /.graduateSec__button -->
29        </li><!-- /.graduateSec__item -->
30  
31      </ul><!-- /.graduateSec__items -->  
32    </div><!-- /.graduateSec__itemsWrapper -->

CSS
1.graduateSec__items {
2  margin: 24px 0 186px 128px;
3}
4
5.graduateSec__item {
6  box-shadow: 0 0 20px rgb(0, 175, 168, 10%);
7  height: 394px;
8  margin: 20px 20px 20px 0;
9  max-width: 315px;
10  padding: 12px;
11  width: 100%;
12}
13
14.graduateSec__item__imgWrapper {
15  border-bottom: 1px solid #EFEFEF;
16}
17
18.graduateSec__item__img img {
19  max-width: 291px;
20  width: 100%;
21}
22
23.graduateSec__item__details {
24  padding: 14px 0;
25}
26
27.graduateSec__item__school {
28  font-size: 12px;
29  padding: 0 8px 3px;
30}
31
32.graduateSec__item__name {
33  font-size: 16px;
34  padding: 0 8px;
35}
36
37.graduateSec__item__text {
38  font-size: 16px;
39  line-height: 1.6;
40  padding: 12px 8px 6px;
41}
42
43.graduateSec__button {
44  display: block;
45  border: 1.5px solid #01B6DB;
46  border-radius: 9999px;
47  margin: 0 0 0 auto;
48  padding: 6px 9px;
49}
50
51.graduateSec__button i {
52  color: #01B6DB;
53  display: inline-block;
54  font-size: 15px;
55  height: 5px;
56  padding: 2px 12px 0 0;
57  width: 5px;
58}

jQuery
1    // graduateSecスライダー
2    $('.js__graduateSecSlider').slick({
3      autoplay: true,
4      autoplaySpeed: 2000,
5      infinite: true,
6      dots: false,
7    });