slick dots 画面の横ブレと画像エリアの下にドットが表示できなくなった件

Cocoonのカルーセルにドットを表示させましたが、そのカスタマイズをしてから画面がグラグラと横ブレするという症状が発生しました。※スマホで閲覧した時のみ

その横ブレを直そうとしていたら今度はまたドットが表示されないという。。

原因はとてもシンプルで、カスタマイズの基礎を知っていればもっと早く直せたと思います。ちゃんと勉強しようかなと感じた出来事でした。

スポンサーリンク

画面の横ブレ改善方法

画面の表示サイズに収まりきらない要素があるのでブレる訳なのですが、色々とカスタマイズしてきたので原因の特定が困難です。

私の場合、症状が出るのはトップページだけなので、トップページにだけ表示させている要素・・カルーセル(スライドショー)だと仮定して調査を進めました。

overflow : hidden;

結論から言うと、この1行のコードをsliderの中に追加しただけで改善しました。

/**カルーセル**/
.slider {
  overflow: hidden;
}

overflowのオプション

{hidden}=はみ出した部分は表示しないという記述です。その他の主なオプションは以下のとおり。

overflow の主な値
  • visible:はみ出した要素を表示【デフォルト】
  • hidden:はみ出した要素は非表示
  • auto:おまかせ
  • scroll:スクロールバーを表示

※いつもお世話になっているHTMLクイックリファレンスさんを参考にしました

画像の下にドットを表示できない

横ブレが直ってホッとしたのも束の間。

それまでは上記の画像のとおり画像の上にドットを重ねて表示させていたのですが、画像の下(エリア外)にドットを表示させようとしたら全く表示されませんでした。

[overflow]を追加してから症状が出たという事は、そもそもドットの位置を正しく指定できていなかった(はみ出ていた)という事になります。

枠外にはみ出ていたドットがoverflowのデフォルト[visible]のおかげで上手いこと表示されていたという。

overflow-x / overflow-y

今回のケースは横ブレさえしなければ良いので、そういうコードないかな〜と探して見つけたのが[overflow-x / overflow-y]。縦と横をそれぞれ別々に指定できるという。

ドットは縦にはみ出している → じゃあ縦ははみ出しOKで横だけ非表示に指定{overflow-y: hidden;}すれば直ると思って試してみましたが、横ブレはしないもののドットは表示されませんでした。

調べたところ、overflowのxとyは連動性があるため、必ずしも私が思っている様な独立した動きはしない様です。

slick全体のサイズを変更

結局はベースとなっているslick全体のサイズを広げて、そのボックス内にドットを表示させる事にしました。恐らく基礎的な事なのかと思います。

赤枠が全体として、paddingとmarginの位置
追加したコード
/*slick ドット*/
.slick-dotted.slick-slider {
  margin-bottom: 10px; 
  padding-bottom: 31px;
}
修正したコード
.slick-dots2 {
  bottom: -40px;
}

こちらを{bottom: 0px;}に修正して全て解決しました。

補足

既存のカスタマイズ方法が間違っていた訳ではありませんが、こういった事が起こり得るという事は認識しなければなりません。

やはりカスタマイズはコピペだけに頼らず、探究心を持ってチャレンジし続けなければならないなと感じました。

でもまずはコピペっすよね(笑)。世の中もそういう流れが多いです。なかなかパイオニアにはなれません。そこからオリジナリティーを求める事で、新しいものが生まれると思います。みたいな。

Comment

タイトルとURLをコピーしました