jQuery「slick.js」にて下記のようにカスタマイズをしたいのですが
調べても答えがなかったので質問させてください。
1、基本は添付画像の形で1枚の画像をスライドさせていきたいのですが両脇にある矢印(次へと戻る)は通常表示させたくありません。
マウスオンした場合に表示させるようにしたいのですがどのようにすればよろしいでしょうか?
動きとしては
http://flexslider.woothemes.com/
が理想です。
※上記サイトの場合は画像をマウスのドラッグで動かせないので今回は見送りました。
2、たぶん初歩的な質問かもしれませんが矢印とドット部分を独自でデザインする場合はどこをいじればいいででしょうか?
※slickのデフォルトの場合はwebフォントのようでどこをいじればいいのかがわかりません。
よろしくお願い致します。
No.1ベストアンサー
- 回答日時:
slick.jsのサイト見たところ、slick-theme.cssをいじればすべてできそうです。
前へボタンは .slick-prev
次へボタンは .slick-next
下のドット状のページャーは .slick-dots 以下
なので該当のクラスのCSSを良いように変更すればできます。
質問の1は
.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;
}
というふうな感じで書けば良いのかなと思います。
質問2はちょっとここで細かくは説明するには無理があります。
難しいとかでなく、デザインのCSSどうするかはご自分で頑張ってもらうしかないので。slick-theme.cssをすべて見て修正してください。
あと、質問の文章から思ったのですが、質問者様はコーディングの環境整っていますか?
FirefoxとFirebugがあれば、プラグインが書き足した全体のソースが見れるので、
普通に自分で作ったHTMLと同じように、CSSでどうデザインするかなどわかってくると思います。
がんばってください。
ご返答ありがとうございます。
さっそくCSSを変更してみようと思います。
また質問2のデザインの方もご指摘頂きました通り
slick-theme.cssをすべて見て修正やってみたいと思います。
FirefoxとFirebugですが、使ったことがなかったので大変勉強になりました。
まだまだ勉強不足ですね。
いろいろ教えて頂きありがとうございます。がんばって勉強致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- 物理学 電磁気学の問題について 1 2022/06/06 17:26
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- Visual Basic(VBA) VBAで不特定枚数印刷をしたいです。 4 2022/08/02 07:30
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- その他(コンピューター・テクノロジー) マウスで文章をドラッグしてコピーする際に、横一列全てが選択されるのですが、 2 2023/06/17 18:05
- Illustrator(イラストレーター) 「頂点で線分を伸ばす」作業がうまく行かない。 1 2022/09/09 10:19
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C#【フォルダの参照】ダイアログ
-
PHPで$_GET[’m’]の意味が分か...
-
アクセスの度にIPアドレスを変...
-
wordの差し込み印刷で文字...
-
switch()文で値の大小比較
-
PHPでのパスワード制限のセキュ...
-
変数の受け渡しによる画像の表示
-
DTOとEntityの差は何ですか。
-
二重ログイン管理について
-
echo $a++とecho ++$a,の違いは?
-
コマンドプロンプトのスクリプ...
-
Yahoo! JAPAN IDを新規取得でき...
-
ミュージックのアートワークを...
-
負荷分散におけるセッションID...
-
Dosブロンプトでtabを出力したい
-
動的なPHPを静的なhtmlページに...
-
英訳お願いします。いつまで食...
-
■(ログイン)セッションの有効期...
-
このような場合の日付計算について
-
PHP 九九表
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CListCtrlのcheckboxサイズ変更
-
OpenFileDialogの自作
-
電話番号のフォーマットについて
-
gooのフィードを作成したのです...
-
PHP リロードせずに、リアルタ...
-
素材屋さんでよく見かける、壁...
-
C# データグリッドにボタンを表示
-
C++でGUIアプリケーションを作...
-
HTML上の画像にマウスオーバー...
-
C#【フォルダの参照】ダイアログ
-
jquery(js)にて実装したいスラ...
-
Java RGBヒストグラム
-
VB.NETで画像の拡大・縮小
-
selectボックスのボタン画像を...
-
随時(定期的に)HPを更新の「方法
-
jQuery『supersized』のカスタ...
-
DrawImageでビットマップを拡大...
-
HP作成方法について
-
画像のようなVimはどう記述すれ...
-
プログラミング言語 HSP
おすすめ情報