最近教えていただいたスライダーライブラリ「Splide」を案件で使いました。その時にやってみてよかったレイアウトを書きます。
Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。ほかのライブラリに依存せず、Lighthouseのエラーもありません。
矢印がスライドの左右中央にあって、ページネーションがスライダーの下中央にあって…といった、ごく一般的なスライダーです。position:absolute;で矢印を左右中央に持ってこようとすると、ページネーションの分下に下がってしまうとか、地味に面倒です。
そこで、グリッドレイアウトを使います。Splideでは矢印2つが1つの親要素に格納されていますが、親要素をdisplay:contents;にするのがミソです。こうすることで、矢印2つとtrackが兄弟要素として扱われます。また、矢印の方を1frにすることで、trackを中央寄せにできます（trackのwidthを明示する必要あり）。
Codepenにサンプルを置いています。