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

スポンサーリンク

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

【WordPress】WordPressでslick.jsを使う方法
WordPressでslickを使う方法を紹介します。完成形 やり方1.子テーマのフォルダ直下にjsフォルダを作成し、home.jsファイルを作成し以下を記載Cocoonテーマの例:wp-content/themes/cocoon-chil...

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

完成形

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

やり方

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

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

完成

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

コメント

タイトルとURLをコピーしました