[Ruby on Rails]slickの矢印の画像を変更する方法[JQuery]

実現したいこと

slickの画像(スライド)を次に送るための両側の矢印の画像を好きなものにする。

色々参考にしたがうまくいかなかったので、自分がうまくいったやり方を残しておきます。

前提

Ruby on Railsで開発を行っています。slickは導入できているものとします。
Rails 5.2.4
ruby 2.5.1
jquery-rails 4.3.5

手順

画像の用意

矢印にしたい画像をapp/asset/imagesフォルダに入れます。

矢印のデフォルト画像の変更

おそらく\2190と\2192の部分が、矢印のデフォルトの画像を指定している部分だと思います。なので、この部分を任意の矢印の画像に取り替えます。

slick-theme.scss

変更前
$slick-prev-character: "\2190" !default;
$slick-next-character: "\2192" !default;

変更後
$slick-prev-character: image-url("left.png") !default;
$slick-next-character: image-url("right.png") !default;

矢印の表示と位置調整

位置の調整は以下の記事を参考にさせていただきました。
https://qiita.com/milneo/items/3560cb01cba92c2ccb6f
これで、矢印が表示されたと思います。slider.scssはslickに対してcssを記述しているファイルです。名前などは人それぞれ違うと思うので気をつけてください。

slider.scss

.slick-prev{
  left: 50px;
  height: 80px;
  width: 80px;
  z-index: 10;
}

.slick-next{
  right: 50px;
  height: 80px;
  width: 80px;
  z-index: 10;
}

最後に

なんとか、矢印の画像の変更はできました。
ただ、まだコードの意味や自分が行ったことの意味を理解していないので、もっと勉強しなけらばなと思いました。

参考