slick 右方向スライド時にカクカクする動きをスムーズにしたい

前提・実現したいこと

jqueryプラグイン slickで、右側にメイン画像が来るようなスライドを作っています。
メインスライド（.slick-current）の位置、大きさだけ他スライドと異なるためcssで指定しています。

右方向スライド時に動きがカクついてしまうため、
スムーズにスライドさせるにはどうすればいいか教えていただきたいです。

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

スライドを「<」矢印で左方向に流しているときは問題なくスムーズに動くのですが、
「>」で右方向に動かすと、以下のような動きが生じます。
・幅1920pxのとき→ メインスライド（.slick-current）が定位置以上に行き過ぎてから戻る
・幅980pxのとき→ メインスライド（.slick-current）が定位置前で一時停止してから戻る

検証ツールで確認したところ、.slick-trackが右方向スライド時に一度大きく右に移動してから少し戻る、といった挙動をしております。

該当のソースコード

HTML
1<body class="top">
2	<div class="kv__wrapper">
3				<ul class="kv__slide js-kv__slide" dir="rtl">
4					<li>
5						<a href="#" class="kv__thumb"><img src="https://placehold.jp/595x476.png" alt=""></a>					
6					</li>
7					<li>
8						<a href="#" class="kv__thumb"><img src="https://placehold.jp/595x476.png" alt=""></a>		
9					</li>
10					<li>
11						<a href="#" class="kv__thumb"><img src="https://placehold.jp/595x476.png" alt=""></a>
12					</li>
13					<li>
14						<a href="#" class="kv__thumb"><img src="https://placehold.jp/595x476.png" alt=""></a>	
15					</li>
16					<li>
17						<a href="#" class="kv__thumb"><img src="https://placehold.jp/595x476.png" alt=""></a>
18					</li>
19					<li>
20						<a href="#" class="kv__thumb"><img src="https://placehold.jp/595x476.png" alt=""></a>
21					</li>
22				</ul>
23			</div>
24</body>

css
1.top .kv__wrapper {
2  position: relative;
3}
4@media (min-width: 769px) {
5  .top .kv__slide {
6    z-index: 10000;
7  }
8}
9
10.top .kv__slide .slick-arrow {
11  text-indent: 100%;
12  white-space: nowrap;
13  overflow: hidden;
14  width: 27px;
15  height: 27px;
16  border-right: 2px solid #000;
17  border-top: 2px solid #000;
18  position: absolute;
19  transform: rotate(-135deg);
20  bottom: 17%;
21  left: 100px;
22  z-index: 500;
23}
24
25@media (min-width: 769px) {
26  .top .kv__slide .slick-arrow {
27    bottom: 12%;
28    width: 70px;
29    height: 70px;
30  }
31}
32
33.top .kv__slide .slick-track {
34  padding-bottom: 55%;
35}
36
37@media (min-width: 769px) {
38  .top .kv__slide .slick-track {
39    padding-bottom: 40%;
40  }
41}
42
43@media (min-width: 1280px) {
44  .top .kv__slide .slick-track {
45    padding-bottom: 70px;
46  }
47}
48
49.top .kv__slide .slick-list {
50  height: 100%;
51  padding: 0 0 0 28.6% !important;
52}
53
54@media (min-width: 769px) {
55  .top .kv__slide .slick-list {
56    padding: 0 0 0 400px !important;
57  }
58}
59
60@media (min-width: 1280px) {
61  .top .kv__slide .slick-list {
62    padding: 0 !important;
63  }
64}
65
66.top .kv__slide .slick-list .slick-slide {
67  position: relative;
68  bottom: -140px;
69  transition: 0.3s;
70  width: 80vw;
71}
72
73@media (min-width: 769px) {
74  .top .kv__slide .slick-list .slick-slide {
75    bottom: -290px;
76    width: auto;
77  }
78}
79
80@media (min-width: 1280px) {
81  .top .kv__slide .slick-list .slick-slide {
82    bottom: -320px;
83    margin-right: 30px;
84  }
85}
86
87.top .kv__slide .slick-list .slick-slide .kv__cap {
88  display: none;
89  font-size: 4.8rem;
90}
91
92@media (min-width: 769px) {
93  .top .kv__slide .slick-list .slick-slide .kv__thumb {
94    width: 100%;
95  }
96}
97
98@media (min-width: 769px) {
99  .top .kv__slide .slick-list .slick-slide .kv__thumb img {
100    width: 100%;
101  }
102}
103
104.top .kv__slide .slick-list .slick-slide.slick-current {
105  transform: translateY(-135px);
106  z-index: 200;
107  margin-left: -20px;
108}
109
110@media (min-width: 769px) {
111  .top .kv__slide .slick-list .slick-slide.slick-current {
112    transform: translateY(-290px);
113    width: calc(100vw - 400px) !important;
114    margin-left: -70px;
115  }
116}
117
118@media (min-width: 1280px) {
119  .top .kv__slide .slick-list .slick-slide.slick-current {
120    max-width: 880px;
121    width: 100%;
122    transform: translateY(-316px);
123  }
124}
125
126.top .kv__slide .slick-list .slick-slide.slick-current .kv__thumb {
127  border-radius: 5px 0 0 5px;
128  overflow: hidden;
129  -moz-box-shadow: -5px 10px 18px 5px rgba(0, 0, 0, 0.36);
130  -webkit-box-shadow: -5px 10px 18px 5px rgba(0, 0, 0, 0.36);
131  -ms-box-shadow: -5px 10px 18px 5px rgba(0, 0, 0, 0.36);
132  box-shadow: -5px 10px 18px 5px rgba(0, 0, 0, 0.36);
133}
134
135@media (min-width: 1280px) {
136  .top .kv__slide .slick-list .slick-slide.slick-current .kv__thumb {
137    border-radius: 10px 0 0 10px;
138  }
139}
140

js
1$(function(){
2	$('.js-kv__slide').slick({
3		mobileFirst: true,
4		rtl: true,
5		infinite: true,
6		arrows: true,
7		slidesToShow: 1,
8		slidesToScroll: 1,
9		variableWidth: true,
10	});
11});

試したこと

心当たりがあるとすれば、スライドにvariableWidthを指定している点です。
メインスライド（.slick-current）にmax-width: 880pxを指定しており、
またスマホ時にスライドの幅を固定にするため、オプションでvariableWidth: trueを指定しています。

PC時にvariableWidthをfalseにすると動きに問題はなくなるのですが、なぜかスライドが2段になってしまうためPCでもtrueにしておりました。
variableWidthをfalseにし、1段で表示されれば一番良いのかもしれませんが、2段になってしまう原因がわからない状態です。

ご教授いただければ幸いです。

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

jqueryのバージョンは2.2.4、slickは1.8.1です。

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

回答1件

ベストアンサー

カクつく原因は単純に
.slick-currentに対してスタイルをかけているところにあります。

動きが完了したタイミングで.slick-currentが付与されるので、そこでCSSが適用され、急な移動につながります。

投稿2021/02/24 23:29

macaron_xxx

総合スコア3191

ztj

2021/02/25 01:18

ご回答ありがとうございます。知識不足で恐縮ですが、質問させてください。 .slick-currentにスタイルを効かせるのは下記のサイトを参考にしたのですが、そちらでは左右にスライドさせても問題なく作動しています。 https://www.nxworld.net/jquery-plugin-slick-current-class-examples.html classが付与されるタイミングですと左右で違いが出ないのではと思うのですが、左にスライドさせる時は問題なく、右の時だけ急な動きになってしまうのはのはなぜでしょうか？スライド自体が右寄せだからでしょうか。

ztj

2021/03/01 09:13

.slick-currentに他のスライドと違うwidthを指定しているのがカクつく原因だったのですね。 widthではなくtransform:scaleで大きく見せることで解決しました。ヒントを頂きありがとうございました。

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