以前にも書いたページネーションですが、ディトラ卒業制作で引っかかりました。以前書いたと言っても、本やネットで調べた情報をまとめて記述しました。実際に取りかかってみるとうまくいきません。一応、本や動画を参考にコードを書いてみました。まず引っかかってしまったのはpage-numbersやcurrenrtなどの独自のクラスをコードに付けなければならないところが全く、理解できてませんでした。考えてみれば、HTMLで自分で考えて作ったクラスをコードに入れても動的にはなりません。CSSのクラス名をpage-numbersに変更して、現在のページへのCSSでの装飾にcurrentをつけます。そうするとページの番号が動的になりました。
ただ、prev_textとnext_textに原因があるのか、余分な四角ができてしまい、動的に反応するのはただの四角の方です。prev_textとnext_textにpage-numbersのクラスを当ててしまっていました。下記のように変更して、形になりました。
できたと思ってチェックしていると、番号が多くなった時の・・・（ドット）が番号と同じ装飾になってしまいました。
ネットで検索して、下記のコードを追加、これでできた気がします。
.page-numbers.dots {//.page-numbersと.dotsの間にスペースはありません
border: none;
pointer-events: none;
}
実際に自分で考えてみると、思わぬところで止まってしまいます。新しいことを学んだ時には今までも同様にありました。これをすることで成長することも経験上知っているので、頑張っていきたいと思います。