要素幅がそれぞれ異なるスライダーの動きをカクカクしないようにしたい

前提・実現したいこと

実現したいこととしては、

画面上に要素が３つのスライダーを表示する。
一つ目の要素だけ他の二つの要素のおよそ２倍のサイズになる。
要素幅を％で指定できる。
無限ループする。
（スワイプもできると嬉しい）

上記４つです。
この４つを実現しようとし、slick.jsを用いてスライダーを作りましたが、動きがカクカクしてしまいます。（具体的には、大きサイズのものがスライド終了後、半分戻ってしまう。）

試したこと

ネット上で色々調べたところ、stack overflowで次のような回答を見つけました。https://stackoverflow.com/questions/43890294/slick-carousel-jumping-when-changing-width-of-active-slide
この回答通りに、 velocity.jsとfiresliderを使ってスライダーを実装してみたところ、動きのカクカクはなくなり、いい感じにスムーズになりました。
しかし、このプラグインはtransform: translateX;によって要素の位置が固定され、三つだけ表示させることができないです。要素の初期位置を変えるオプションもなく、自分はそんなにjavascriptのコードが読める訳でもないので、断念しました。
velocity.jsさえ使えれば他のプラグインでもいいんじゃないか？と思い、それも調べましたが、velocity.jsと他のプラグインを一緒に使う方法が分からず完全に手詰まり状態になってしまいました・・・。

該当のソースコード

ソースコードはこちらになります。
また下記のURLで自分作ったスライダーを確認できるようにしました。
https://bbbbruno.github.io/slidertest/
上はSlickで作ったものの、動きがカクカクのスライダー。
下はvelocity.jsと firesliderで作ったが、要素がずれてしまうスライダーです。

参考サイト

https://liginc.co.jp/
このサイトのようなイメージです。こんな感じでスムーズになれば嬉しいです。

実現したいことはそんなに複雑じゃないとは思うのですが、丸一日頑張ってもダメで、なんだか自分でもどんどん違う方向に行っている気がしたので質問させていただきました。
正直サイズの違う要素を三つ並べるスライダーで、動きがカクカクでないのならばどんな方法でも構いません！
自分だけでは現在どうにもならないので、どうか誰でもいいのでお力を貸していただきたいです。。
どうぞよろしくお願いします????‍♂️