以下の記事で紹介した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;
}
完成
これで左矢印が表示されました。
コメント