ちょくちょくホームページの見栄えを修正したいなと思うのだが、自分でJavaScriptやCSSを組んだりするのも限界がある。そこで、先人が公開している物を使わせてもらうのだが、思うように動かないことがある。

表紙の写真を複数表示したいとき、ベタベタ並べるよりも、スライドして１枚１枚を大きく見せる”スライダー”という手法がある。

早速取り入れてみようと、レスポンシブに強いカルーセルスライダーslickの使い方というページを参照し、自分自身のホームページに組み込んでみたが、写真が出てこない。横に間延びしてしまい、写真が表示されないのだ。この紹介しているページの表示は正しいので、環境の問題ではない。調べに調べた結果、この写真を貼り付けている領域をCSSで定義しているのだが、width(横幅)をautoで設定していたためと判明。ホームページ全体のサイズ指定をしていたのだが、結局それが無視されているのか、謎なところはあるが、サイズを指定すればその幅に収まるようになった。

jQueryを利用したスライダーは色々あって、slider-proというものを使おうとしていたが、こちらも画像が表示されず、領域が横に割り付けられずなぜか縦に割り付けられるというところまでつかんだが対応策が見つからず断念した。slickでも機能的には問題ないので、これで落ち着いている。