🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

3回答

3730閲覧

slickスライダーのdotsを数字にカスタマイズしたい

UKYO9311

総合スコア31

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/04/02 08:18

slickスライダーのカスタマイズをしたかったのですがどうしてもできなく誰か助けて頂きたいです( ; ; )

標準のdotsだと、
イメージ説明
このような感じに表示されると思うのですが、これを、、、
イメージ説明
このように数字で表示させたいです。

やってみたこと
・ slick-theme.css内の.slick-dots li button:before{content: '•';}を'01'に変更。→確かに変わったのですが、全て01になってしまいました。。。

他に足りない情報などありましたらご指摘ください(>_<)
お手数おかけしますが、よろしくお願い致します。。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

まぁ良し悪し評価分かれそうですが

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

yambejp

総合スコア116694

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

LibertyBell3

総合スコア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
oikashinoa

総合スコア2826

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問