Q&A
「拡大縮小」とはどのような操作のことですか？
前提・実現したいこと
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/
ctrlキーと-キーで、縮小、
ctrlキーと+キーで拡大操作ができます。
それは、JavaScriptにAPIがないはずなので、対応は難しいかと思います。
ではこのURLのようなスライドショーは何を使っているのでしょうか。。
https://www.puchimarry.com/
そちらのページのスライダーでも、当方の環境では300％ほどにすると、スライダーの画像が見られなくなりました。
環境の問題かもしれませんね。
そうなんですか。
拡大しても画像同士が重ならなければ良いのですが、難しいですかね。。
縮小して隙間ができることは、どうにもならないことなんですかね。。
少し調べてみましたが、スライド枚数を自動計算する拡張のコードがありました。
5年前のものなので、現在も動くのかわかりませんが、お試しになられては？
ありがとうございます。できればURLを教えて頂きたいです。お願いします。
すみません、URLを貼り忘れていました。
https://github.com/kenwheeler/slick/issues/1071
ちなみに、https://www.puchimarry.com/ さんのスライダーのコードも見てみましたが、これは自製だと思います。
ありがとうございます！
頂いたURLに書いていたコードで「variableWidth: false,」というのがあって、気になって調べてtrueにしてやると、やりたいことができました！スライド幅を自動計算するオプションみたいです！助かりました！
自製のコードなんですが、、私は初心者なので自製かどうかもわかりませんでした。作った人すごいです。
あなたの回答
tips
プレビュー
