slickのdotsが表示されない問題を泥臭く解決【cocoon】

以前カルーセルのカスタマイズにチャレンジしたのですが、どうしてもドットの表示だけが出来なかったのです。どうやっても。

あれから4か月・・本日ようやくドットを表示させる事ができました。しかし、今回の対応はスマートな方法ではなくパワープレイに近いものです。詳しい人なら1〜2行のコードで直せそうな気もします。

この記事で紹介するカスタマイズコードをそのままコピペしても機能しない可能性があるので、ぜひ解決に至るまでの経緯も確認の上で参考にして頂ければと思います（とか言ったら誰も読まないかも）

ドットが表示されない

当サイトはWordPress / Cocoonを利用中です。Javascript.js のslickのコードに「dots: true」を追加すればドットが表示されるはずですが、なぜか表示されません。

他のサイトからコードをコピペしたり手入力したり空白や記号にも気を配って何度も入れ直しましたが、入力ミスでは無さそうです。

jQuery(function($){
$('.slider').slick({
  autoplay:true,
  dots: true,
});

表示されない原因は？

まぁシンプルに私のスキル不足では・・まずは自分が追加したslick関連のコードを疑いました。例えばスライドショー(画像)のサイズが大きすぎてドットが枠外に追いやられてしまった？など。

Cocoon の slick 関連コード

自分の設定ミスを検証する為にCocoonに記されているデフォルトのコードを探して、クラスごとに数値を変えて原因を追求しました。

/* Slick */

.slick-dotted.slick-slider {
  margin-bottom: 30px; 
}
.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%; 
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px; 
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer; 
}
.slick-dots li button {
  border: 0;
  background:transparent; 
  display: block; 
  height: 20px; 
  width: 20px; 
  outline: none;
  line-height: 0px; 
  font-size: 0px; 
  color: transparent;
  padding: 5px;
  cursor: pointer; 
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0; 
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-  
  smoothing:antialiased;
  -moz-osx-fontsmoothing:grayscale;
}
.slick-dots li
.slick-active button:before {
  color: black; 
  opacity: 0.75;
}

検証結果

上記のコードを追加CSSに丸ごとコピペして値を色々と変えてみましたが、一切変化がありませんでした。要するにコードの問題ではなく何らかの仕様で slick-dots 自体が非表示にされている様です。

そうなると素人には困難です。Cocoonのフォーラムで質問してみようかとも思いましたが、何か申し訳ないですし個人の勝手なカスタマイズだから関係ないかなとも思いまして。

クラス名の変更【dotsClass】

最初にカスタマイズに挑戦した時に何度も参考にしたのが STAND 4U さんのサイト。あらためて見ているとオプション一覧にドットのクラス名を変更するコードを発見。

dotsClass:’slick-dots’,

試しにクラス名を適当な名称に変えたところドットが表示される様になりました。

本来であればデフォルトの slick-dots を表示させるのがスマートな解決方法ですが、今回は新しいドットの定義を作ってそれをデフォルトの代わりに表示させる作戦を取りました。

カスタマイズ詳細

以降はあまり真似されない方が良いかと思います。一応こんな方法もあるのか、という感じで参考にして頂ければ幸いです。

javascript.js

カスタマイズを楽に進めたいので、新しいクラス名は slick-dots2 にしました。Cocoonの子テーマ内にある javascript.js で編集しています。

jQuery(function($){
$('.slider').slick({
　autoplay:true,
　autoplaySpeed:4000,
　fade:true,
　speed:900,
　infinite: true,
  dots: true,
  dotsClass: 'slick-dots2',
});

スタイルシート

デフォルトのslick-dotsコードをベースとして、1つ1つがどの様な役割かを確かめながら追加・削除・値の変更などを実施しました。かなり当サイトに特化したコードなので、あくまでも参考として見てください。

.slick-dots2 {
  position: absolute;
  bottom: -40px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots2 li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots2 li.slick-active
  button::before {
  color: red;
}
.slick-dots2 li button {
  background: transparent;
  border:0;
  font-size: 0pt;
}
.slick-dots2 li button::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
}

ドットが数字になってしまう場合

「何で数字が表示されるんだ！？」ではなく、そもそもデフォルトがドットではなく数字の様です。[li button]がデフォルトの数字表記に対するコードですが、非表示にしていると言うよりは背景色・ボーダー色・フォントサイズを変えて見えなくさせています。

.slick-dots2 li button {      
  background: transparent;   
  border:0;   
  font-size: 0pt; 
}

[li button::before]が数字の代わりにドットを表示させるコードです。

その後、画面が横ブレしてしまう話

スマホで見た時に特定ページだけ画面が横ブレしてしまう原因【Overflow】

特定ページでスマホ画面の横ブレ・左右にグラグラ動く症状が発生した場合の原因と解決方法。overflow:hiddenでグラグラは直るもslickのドットが表示ができなくなる。iPhone Cocoon wordpress環境です。

unity-right.com