目次
- 各画像のサイズがバラバラだったこと
- 複数枚表示の設定にしたときに、画像の数がそれ以下だったこと
- 課題
各画像のサイズがバラバラだったこと
スマホで撮影した3つの画像を用意して基本のスライダーを作ってみたのですが、画像のサイズが大きすぎて、画面いっぱいに表示されてしまいました。
そのため、CSSでwidthを600pxなどに変更してみたのですが、今度は画像が左端の方に表示されてしまいました。
imgはdiv要素に入っているので、divの左端に寄っているのだということが分かり、CSSで"margin : auto"に設定。
これで左端だったものを中央に寄せることができました。
ところが、各画像の元々のサイズがバラバラだったため、スライドするたびに画像の高さが変わってしまい、イマイチな感じでした。
そのため、サイズを揃えたいと思いCSSでwidthやheightをいじってみたのですが、なぜか上手くいかず。
サイズの変更について記述されたサイトを参照し、heightをvwで設定、"object-fit : cover"を記載してみたところ、改善しました。
参照したサイト
https://design-levelup.com/webdesign/js/jquery_making_3/https://and-ha.com/coding/slick/
複数枚表示の設定にしたときに、画像の数がそれ以下だったこと
色々なパターンのslickの実装を試していた時に、もう一つ躓いた点があります。
それは、3枚のスライドを表示させるタイプの実装を行っている時に、そもそも用意している画像がぴったり3枚だったために、それ以上スライドして表示させる画像がなく、スライダーとして機能しなかったことです。
なぜスライドしないのか理解するまで少し時間がかかりました。
最終的にこのタイプのスライダーは採用しませんでしたが、覚えておく必要があるなと思ったので記載させていただきます。
課題
とりあえず簡単なslickの実装は完了しましたが、ググると様々なslickのカスタマイズができることが分かりました。
cssの記載がたくさんあったりして理解が難しかったので、余裕ができたら理解できるように勉強したいと思います。
それと、slickを実装したタイミングだと思うのですが、サイトがとても重くなって、リロードにすごく時間がかかるようになってしまいました。
画像のサイズが大きいせいかと思い、画像のリサイズをして容量を小さくしてみたのですが変わりはなく、これをなんとか改善せねばと思っています。
読み込んでいるファイルが多いからでしょうか。css、Bootstrap、slick、Javascript、Jquery...。
その問題を調査しつつ、次はProfileのパートに取り掛かりたいと思っています。