jQueryのslick.jsのドット表示

スマホサイトで画像が横にスライドしつつ端だけ見切れて表示されるスクリプト

つまり見切れるスクリプトを組んでほしいっと言われて、

こんな時はjクエリエモーン…ありました。slick

そして

jQueryのslick.jsを使って 画像を流すスクリプトを構築してみたけど

カルーセル下のドット画像がどーしても表示されない

何度見返しても、何度ダウンロードしても

gitからslick-themeを持ってきてfontsも全部入れて

何度も何度もやり直してみたけどさっぱり

ドットが表示されないので

それこそ無駄に何日も費やして

それでもできないので、もう

CSSでそれっぽいボタンを作ることに

ということでそのソース

.slick-dots li button:before{

background: #EEE;

border: 3px solid #666;

border-radius: 70px;

color: #666;

width: 10px;

height: 10px;

}

これでbeforeの色だけ作って

あとは画像が移動したら

ボーダーの色が濃くなるので

濃くなった色がメインで表示されてる

BASICならcircle (x,y),10とか書いてるとこだぜって

不毛なことを考えながら

できたしこれでいいかなって思いながら

この案件は満足しないまま終了。

WebMemo
スポンサーリンク
Motablog

コメント