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のプラグインで簡単にイメージスライダーを作成(bxslider)
画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...
-
htmlタグが入った内容の文字を丸める
phpである文字列が○文字以上だった際、 省略してお尻に「……」をつけたいという ...
-
jquery.cookie.jsで「$.cookie is not a function」エラー
フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...
-
jQuery UIを用いた日付及び時間のピッカーの利用方法
jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...
-
AjaxのJSONP使用でPHPで作った配列をJSに返す方法
AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...