【WordPress】slick.jsの左矢印（戻るボタン）を表示する方法

2023年8月16日WordPress

以下の記事で紹介したslick.jsだが、完成形のものを見ると右矢印は出ているが、左矢印は出ていない。

左矢印はデフォルトでは出てこず、一工夫必要なので、その方法を紹介する。

完成形

以下のように左矢印も出てくるようになる。

やり方

1．子テーマのstyle.cssに以下を記載
※slide-itemsのクラス名は最初に紹介したブログで使用している名前なので、各自のクラス名に適宜合わせてください。

/* 左矢印が右にはみ出て見えないので位置調整 */
.slide-items .slick-prev {
  /* z-indexの値を0よりも大きくすると表示される。 */
  z-index: 10;
  left: 50px;
}

完成

これで左矢印が表示されました。