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とかでレスポンシブ対応にしたい場合に良さげ。
関連記事
-
jQueryのfind実行時に複数のセレクタを指定する方法
jQueryのfind()実行時に複数のセレクタを指定したい。 <div ...
-
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
-
Ajaxで画像のアップロード(jquery.upload)
業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...
-
jQueryuiを用いてメールの入力補助(サジェスト)
autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...
-
jQuery UIを使って簡単にダイアログを表示させる方法
ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...