Q&A
slickスライダーのカスタマイズをしたかったのですがどうしてもできなく誰か助けて頂きたいです( ; ; )
標準のdotsだと、
このような感じに表示されると思うのですが、これを、、、
このように数字で表示させたいです。
やってみたこと
・ slick-theme.css内の.slick-dots li button:before{content: '•';}を'01'に変更。→確かに変わったのですが、全て01になってしまいました。。。
他に足りない情報などありましたらご指摘ください(>_<)
お手数おかけしますが、よろしくお願い致します。。。
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
回答3件
1
まぁ良し悪し評価分かれそうですが
CSS
1<style> 2.slick-dots li {list-style:none;} 3.slick-dots li:nth-child(1) button:before{content: '01';} 4.slick-dots li:nth-child(2) button:before{content: '02';} 5.slick-dots li:nth-child(3) button:before{content: '03';} 6.slick-dots li:nth-child(4) button:before{content: '04';} 7</style> 8<ul class="slick-dots"> 9<li><button></button></li> 10<li><button></button></li> 11<li><button></button></li> 12<li><button></button></li> 13</ul> 14<ul class="slick-dots"> 15<li><button></button></li> 16<li><button></button></li> 17<li><button></button></li> 18<li><button></button></li> 19</ul>
投稿2019/04/02 08:30
総合スコア109892
0
counterは<ol>
だけに有効なのかと思ったら、<ul>
にも効くんですね。
ということで、以下のようにします。
CSS
1.slick-dots { 2 list-style-type:none; 3 counter-reset:number; 4} 5.slick-dots li button::before { 6 counter-increment:number; 7 content:'0'counter(number); 8} 9.slick-dots li:nth-child(9) ~ li button::before { 10 content:counter(number); 11}
使ったことないScriptなので、多分(未検証)な回答になりますが、ご了承ください。
投稿2019/04/02 12:28
総合スコア1084
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
0
customPaging | slick - にほんご。を参考にすれば実現可能です。
https://stackoverflow.com/questions/34660680/slick-slider-replace-dots-with-numbers
⇡のうち、customPagingを抜き出すとこんな感じ。
js
1 customPaging : function(slider, i) { 2 var thumb = $(slider.$slides[i]).data(); 3// return '<a>'+(i+1)+'</a>'; 4 return `<a>${(i+1).toString().padStart(2, "0")}</a>`; 5 },
投稿2019/04/02 08:59
編集2019/04/02 13:40総合スコア2824
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
関連した質問
Q&A
解決済
slick.jsを用いて、widthが制御できません
回答2
クリップ1
更新
2016/08/04
Q&A
受付中
メインビジュアルにCSSで背景画像を指定した際に、ナビゲーションが上に重なってしまう
回答1
クリップ0
更新
2023/03/27
意見交換
受付中
プログラミングの設計が分からない
回答24
クリップ10
更新
2023/03/17
Q&A
受付中
データ共通化:2つのスライダーに同じデータを使って、ツマミを動かした値を連動させたい
回答2
クリップ0
更新
2023/03/19
Q&A
解決済
safariで表示した際のレイアウトがどうしても崩れてしまう
回答1
クリップ0
更新
2023/03/23
意見交換
受付中
データベースの負荷を下げたい
回答27
クリップ0
更新
2023/03/27
Q&A
受付中
【GAS】フォルダ内の全ファイルに対し処理を行う際の処理順
回答1
クリップ2
更新
2023/03/26
同じタグがついた質問を見る
CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。
HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。
jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。