カルーセルスライダー「slick.js」のカスタマイズ

jQuery「slick.js」にて下記のようにカスタマイズをしたいのですが
調べても答えがなかったので質問させてください。

1、基本は添付画像の形で1枚の画像をスライドさせていきたいのですが両脇にある矢印(次へと戻る)は通常表示させたくありません。
マウスオンした場合に表示させるようにしたいのですがどのようにすればよろしいでしょうか？

動きとしては
http://flexslider.woothemes.com/
が理想です。
※上記サイトの場合は画像をマウスのドラッグで動かせないので今回は見送りました。


2、たぶん初歩的な質問かもしれませんが矢印とドット部分を独自でデザインする場合はどこをいじればいいででしょうか？
※slickのデフォルトの場合はwebフォントのようでどこをいじればいいのかがわかりません。

よろしくお願い致します。

No.1 ベストアンサー 回答者： fufufunofufufu 回答日時： 2015/09/03 17:05

slick.jsのサイト見たところ、slick-theme.cssをいじればすべてできそうです。

前へボタンは　.slick-prev
次へボタンは　.slick-next
下のドット状のページャーは　.slick-dots 以下
なので該当のクラスのCSSを良いように変更すればできます。

質問の１は
.slick-slider .slick-prev ,.slick-slider .slick-next{
opacity:0;
cursor: default;
}
.slick-slider:hover .slick-prev ,.slick-slider:hover .slick-next{
opacity:1;
cursor: pointer;
}
というふうな感じで書けば良いのかなと思います。

質問２はちょっとここで細かくは説明するには無理があります。
難しいとかでなく、デザインのCSSどうするかはご自分で頑張ってもらうしかないので。slick-theme.cssをすべて見て修正してください。

あと、質問の文章から思ったのですが、質問者様はコーディングの環境整っていますか？

FirefoxとFirebugがあれば、プラグインが書き足した全体のソースが見れるので、
普通に自分で作ったHTMLと同じように、CSSでどうデザインするかなどわかってくると思います。

がんばってください。

この回答へのお礼

ご返答ありがとうございます。

さっそくCSSを変更してみようと思います。

また質問2のデザインの方もご指摘頂きました通り
slick-theme.cssをすべて見て修正やってみたいと思います。

FirefoxとFirebugですが、使ったことがなかったので大変勉強になりました。
まだまだ勉強不足ですね。

いろいろ教えて頂きありがとうございます。がんばって勉強致します。

お礼日時：2015/09/04 13:28