slickの矢印の変更

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

slickの矢印をfontawesomeにしたいのですがうまくいきません。
解決方法を教えてください

該当のソースコード

html

$('.multiple-items').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
appendArrows: $('.arrows'),
});

試したこと

昨日からずっと調べているのですが解決法がわかりません

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答1件

このあたりとか参考になりませんか？

【Slick.jsでオリジナルの矢印ボタンを設置する: Web制作会社の裏事情】
http://umioyo.seesaa.net/article/422072987.html

【slick　導入・矢印画像差し替え - Qiita】
https://qiita.com/triamquium/items/eace7179d3c54c079b0f#１矢印画像をhtmlに記述

追記：

.slick-nextにフォントサイズ／カラーの指定があるために、表示されていない状態でした。
サイズや位置は適当に調整してください。

CSS
1.slick_container {
2  margin: 20vw; /* for TEST */
3  position: relative;
4}
5
6#arrows i {
7  font-size: 20px !important;
8  color: #000 !important;
9}
10
11.slick-slide img {
12  width: 100%;
13}
14
15.slick-arrow {
16  display: none;
17}

JavaScript
1$(function(){
2    var slick = $('#mainSlide').slick({
3        appendArrows: $('#arrows')
4
5    });
6    $('div.slick-next').on('click', function () {
7        slick.slick('slickNext');
8    });
9    $('div.slick-prev').on('click', function () {
10        slick.slick('slickPrev');
11    });
12});
13```**動くサンプル：**[https://jsfiddle.net/s9yto4gj/](https://jsfiddle.net/s9yto4gj/)
14
15---
16
17
18こっちのほうがシンプルかな。
19
20
21```HTML
22<div class="slick_container">
23<div id="mainSlide">
24<div><img src="https://placehold.jp/24/99cc99/339933/350x150.png?text=main_slide01.jpg"></div>
25<div><img src="https://placehold.jp/24/cc9999/993333/350x150.png?text=main_slide02.jpg"></div>
26</div><!-- / #mainSlide -->
27<div id="arrows"></div>
28</div><!-- / .slick_container -->

CSS
1.slick_container {
2  margin: 20vw; /* for TEST */
3  position: relative;
4}
5
6#arrows i {
7  font-size: 20px !important;
8  color: #000 !important;
9}
10
11.slick-slide img {
12  width: 100%; /* for TEST */
13}

js
1$(function(){
2    var slick = $('#mainSlide').slick({
3        appendArrows: $('#arrows')
4        ,prevArrow: '<div class="slick-prev"><i class="fas fa-chevron-left"></i></div>'
5        ,nextArrow: '<div class="slick-next"><i class="fas fa-chevron-right"></i></div>'
6
7    });
8});
9```**動くサンプル：**[https://jsfiddle.net/s9yto4gj/1/](https://jsfiddle.net/s9yto4gj/1/)

投稿2020/05/11 11:27

編集2020/05/12 08:02

kei344

総合スコア69458

chihiro0804

2020/05/12 01:10

ありがとうございます！試したのですが動きませんでした…

chihiro0804

2020/05/12 08:16 編集

わざわざご丁寧に本当にありがとうございます。ただ、変わらず、押してもなんの反応もありません????

kei344

2020/05/12 08:16

こちらの提示したものは、あなたの環境で表示されていますか？

chihiro0804

2020/05/12 08:19

html <div class="multiple-items"> <div> <img src="./images/cheers-839865_640.jpg" width="320px"> <p>2020/xx/xx</p> <p>イベントのお知らせ</p> </div> <div> <img src="./images/live-music-2219036_640.jpg" width="320px"> <p>2020/xx/xx</p> <p>イベントのお知らせ</p> </div> <div> <img src="./images/admission-2974645_640.jpg" width="320px"> <p>2020/xx/xx</p> <p>イベントのお知らせ</p> </div> <div> <img src="./images/balloon-3797334_640.jpg" width="320px"> <p>2020/xx/xx</p> <p>イベントのお知らせ</p> </div> <div> <img src="./images/wedding-1537147_640.jpg" width="320px"> <p>2020/xx/xx</p> <p>イベントのお知らせ</p> </div> </div> <div id="arrows"></div>

chihiro0804

2020/05/12 08:19

css .news { height: 500px; text-align: center; .multiple-items { text-align: center; img { margin: 0 auto; filter: grayscale(60%); } } .multiple-items { position: relative; } #arrows i { font-size: 20px !important; color: #000 !important; } }

chihiro0804

2020/05/12 08:19

js $('.multiple-items').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, arrows: false, appendArrows: $('#arrows') ,prevArrow: '<div class="slick-prev"><i class="fas fa-chevron-left"></i></div>' ,nextArrow: '<div class="slick-next"><i class="fas fa-chevron-right"></i></div>' });

chihiro0804

2020/05/12 08:20

htmlは上にnewsクラスがついていますもし何か間違いがあって指摘してくだされと助かります

kei344

2020/05/12 08:24

（2回目）こちらの提示したものは、あなたの環境で表示されていますか？

行動規範の内容に同意します