jQueryの画像スライダー用プラグイン「slick」の使い方
2024/04/17
jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコード及びサンプルページをメモ。
slick
公式サイト
https://kenwheeler.github.io/slick/
CDN
https://cdnjs.com/libraries/slick-carousel
サンプル
https://taitan916.info/sample/slick/
ソースコード
<html> <head> <title>slickのテスト</title> <link rel="stylesheet" type="text/css" href="./slick.css"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./slick.min.js"></script> <script> $(function(){ $('.hoge').slick({ dots : true, }); }); </script> <style> .hoge { background: #000; height: 200px; width: 300px; margin: 0 auto; } .hoge img { margin: 0 auto; } .slick-prev:before, .slick-next:before { color: #f00; } </style> </head> <body> <div class="hoge"> <div><img src="./img/1.jpg"></div> <div><img src="./img/2.jpg"></div> <div><img src="./img/3.jpg"></div> </div> </body> </html>
その他
スマホ、タブレット、PCとかでレスポンシブ対応にしたい場合に良さげ。
関連記事
FormDataを使ったAjax通信がiPhoneのみエラー
FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...
jQuery UIを使って簡単にダイアログを表示させる方法
ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...
pjaxについてのメモ
ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...
jQueryでjsonデータを処理(parseJSON)
他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...
セレクトメニューにサジェスト機能をつける方法(select2)
formのselectメニューで何文字が入力すると候補を絞って表示させるサジェス ...