slickで拡大、縮小を自動で表示画像枚数を変えるスライドショーを実行したいです。

Question

前提・実現したいこと

slickを使ってスライドショーを作成しています。
拡大縮小した時に、自動で表示画像枚数を変えてバランスを整えるスライドショーを実行したいです。
現在、3枚の画像を表示する設定にしています。
これらは自動で1枚づつスライドされます。

100％表示すると丁度よく3枚の画像が入りますが、
25％に縮小すると、画像と画像の間に大きなスペースが出来てしまいます。
全部で9枚くらい入りそうです。
そして500％に拡大すると、無理やり3枚の画像が表示され（一枚につき一部しか表示されず、画像が切れてしまっている）、
パット見て何の画像かわかりません。

これを、縮小したら9枚でも良いので、
隙間ないスライドショーを実行させ、
拡大したら一枚でも良いので画像をしっかり表示、
そして100％なら3枚くらい（左右の画像は少し切れてもよい）表示できるスライドショーが作成したいです。
どこを直したらできますでしょうか？

該当のソースコード

ソースコード
HTML
<div class="slider" dir="rtl">
            
                <div>
                <!--alt属性（オルト属性）とは、HTMLのimg要素の中に記述される画像の代替となるテキスト情報。-->
                <img src="image/TOP/3197206_s.jpg" width="500" height="350" alt="slide1">
                </div>
                
                <div>
                <img src="image/TOP/3990600_l.jpg" width="500" height="350" alt="slide2">
                </div>
                
                <div>
                <img src="image/TOP/3990800_s.jpg" width="500" height="350" alt="slide3">
                </div>
                
                <div>
                <img src="image/TOP/3990858_m.jpg" width="500" height="350" alt="slide4">
                </div>
                
                <div>
                <img src="image/TOP/3990793_s.jpg" width="500" height="350" alt="slide5">
                </div>


JavaScpipt

   $(document).ready(function(){
     $('.slider').slick({
        //  ドットのナビゲーションを表示
        dots:false,
        // 自動再生
        autoplay:true,
        // スライドの無限ループ
        infinite: true,
        // 表示するスライド数
        slidesToShow: 3,
        // スクロールするスライド数
        slidesToScroll: 1,
        // キーボードの矢印キーの左右で画像切り替え	
        accessibility: false,
        // スライダーの方向を右から左に変更（親要素に「dir=“trl”を記述」）
        rtl: true,
        // 自動再生のスピード
        autoplaySpeed: 2000,
        // 現在のスライドを中央に表示
        centerMode: true,
        // centerModeの左右のスライドを見せる幅を指定（px of %）
        centerPadding: 50,
        // 前・次の矢印
        arrows: false,
     　　　 });
    });

CSS
/*一番上のスライドショー画像*/
.slider {
     
    width: auto;
    height:400px;
    margin-bottom: 10px ;
    padding-top: 100px;
    overflow: hidden;
    
}

試したこと

ここに問題に対して試したことを記載してください。

slidesToShow: 3,をもっと大きい表宇にしたら、拡大時画像がかぶってしまいます。

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

ここにより詳細な情報を記載してください。

理想のスライドショーはこんな感じです。
https://www.puchimarry.com/

Comments

[Lhankor_Mhy]

「拡大縮小」とはどのような操作のことですか？

[Yweb]

ctrlキーと-キーで、縮小、
ctrlキーと+キーで拡大操作ができます。

[Lhankor_Mhy]

それは、JavaScriptにAPIがないはずなので、対応は難しいかと思います。

[Yweb]

ではこのURLのようなスライドショーは何を使っているのでしょうか。。
https://www.puchimarry.com/

[Lhankor_Mhy]

そちらのページのスライダーでも、当方の環境では300％ほどにすると、スライダーの画像が見られなくなりました。

環境の問題かもしれませんね。

[Yweb]

そうなんですか。
拡大しても画像同士が重ならなければ良いのですが、難しいですかね。。
縮小して隙間ができることは、どうにもならないことなんですかね。。

[Lhankor_Mhy]

少し調べてみましたが、スライド枚数を自動計算する拡張のコードがありました。
5年前のものなので、現在も動くのかわかりませんが、お試しになられては？

[Yweb]

ありがとうございます。できればURLを教えて頂きたいです。お願いします。

[Lhankor_Mhy]

すみません、URLを貼り忘れていました。
https://github.com/kenwheeler/slick/issues/1071

[Lhankor_Mhy]

ちなみに、https://www.puchimarry.com/ さんのスライダーのコードも見てみましたが、これは自製だと思います。

[Yweb]

ありがとうございます！
頂いたURLに書いていたコードで「variableWidth: false,」というのがあって、気になって調べてtrueにしてやると、やりたいことができました！スライド幅を自動計算するオプションみたいです！助かりました！

自製のコードなんですが、、私は初心者なので自製かどうかもわかりませんでした。作った人すごいです。