JavaScriptの画像スライダーで横移動させるプログラム解説【slick.js】
slick.jsを使って画像を横移動させるスライドショーのプログラミングを解説です。
この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと
slick.jsで画像スライダーで横移動させるプログラム解説
slick.jsを使って画像を横移動させるスライドショーのプログラミングを解説します。
slick.jsとは
slick.jsは、JavaScriptのライブラリです。slick.jsを使うと簡単に画像スライドをプログラミング出来ます。
ダウンロード：http://kenwheeler.github.io/slick/
/system/3841/slick.jsを使わないで画像スライダーを実装する方法について解説しています。
サンプルコード
では、さっそくslick.jsを使って画像を横移動させるスライドショーのサンプルコードから紹介します。
(基本的に画像パス以外はコピペで動くと思います。)
今回はslick.js以外にHTMLタグの追加などを簡単に行えるように「JQuery」を使っています。
<html>
<head>
<meta charset="utf-8">
<title>slick.js - Image Slider Sample</title>
<link rel="stylesheet" href="/slick/slick.css">
<link rel="stylesheet" href="/slick/slick-theme.css">
<style>
body {
text-align: center;
}
.slider {
margin: 0 auto 50px;
}
.slider img {
width: 100%;
}
</style>
</head>
<body>
<h1>slick.js - Image Slider Sample</h1>
<ul class="slider">
<li><img src="/img/1.jpg" alt="imgae(1)"></li>
<li><img src="/img/2.jpg" alt="imgae(2)"></li>
<li><img src="/img/3.jpg" alt="imgae(3)"></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/slick/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.slider').slick({
autoplay: true
});
});
</script>
</body>
</html>HTML部分の解説
slick.jsを使って画像を横移動させるスライドショーのサンプルコードのHTML部分から解説します。
細かく解説していきます！
文字コードを指定
HTMLのheadタグ内にmetaタグでcharset(文字コード)をUTF-8に指定します。
<meta charset="utf-8">metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。
slick.jsのCSSを読み込む
slick.jsのCSSを読み込みます。
ダウンロード先：http://kenwheeler.github.io/slick/
<link rel="stylesheet" href="/slick/slick.css">
<link rel="stylesheet" href="/slick/slick-theme.css">画像リストを作成
ulタグで画像のリストを用意します。あとJavaScriptで画像スライダーを適用するためにclass名を"slider"としておきます。
<ul class="slider">
<li><img src="/img/1.jpg" alt="imgae(1)"></li>
<li><img src="/img/2.jpg" alt="imgae(2)"></li>
<li><img src="/img/3.jpg" alt="imgae(3)"></li>
</ul>※画像のパスは変更してください。
JQueryをCDNで読み込む
JavaScriptでHTMLタグの追加を簡単に行えるようにJQueryを読み込みます。JQueryをCDNで読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Content Delivery Networkの略です。
リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
簡単にいうと「高速にリソース(CSSやJQuery)を外部サーバから取得できる」って感じです。
slick.jsを読み込む
slick.jsを読み込みます。
ダウンロード先：http://kenwheeler.github.io/slick/
<script src="/slick/slick.min.js"></script>基本的にJavaScriptのライブラリは、***.min.jsが用意されています。これは改行などを減らしてファイルサイズを小さくしてあります。理由は通信速度を高めてWebページの表示速度を高める効果などがあります。
CSS部分の解説
slick.jsを使って画像を横移動させるスライドショーのサンプルコードのCSS部分から解説をします。
このスタイル調整しなくても画像スライドには影響ないです。
レイアウトを微調整します。
styleタグを用意してスタイルを定義
スタイルを記述するためにstyleタグを記述します。
<style>
・・・
</style>見た目の微調整
テキストのセンタリングや画像の余白などを微調整します。
body {
text-align: center;
}
.slider {
margin: 0 auto 50px;
}
.slider img {
width: 100%;
}JavaScript部分の解説
slick.jsを使って画像を横移動させるスライドショーするサンプルコードのJavaScript部分から解説をします。
ここからが本番！といっても数行だけですが💦
slick.jsで画像スライドを定義
ulタグに指定したclass名の"slider"に対して、slick.jsを定義します。
(はい、たったの3行だけでOK)
$(document).ready(function () {
$('.slider').slick({
autoplay: true
});
});まとめ【slick.jsを使って画像スライダーで横移動させるプログラム解説】
今回はslick.jsを使って画像を横移動させるスライドショーするサンプルコードを解説しました。
ライブラリを使うとたったの３行で出来ちゃうんで便利です！
JavaScriptには、他にもたくさん便利なライブラリがあります。知っていると開発効率が断然アップします。いざという時は利用するのもアリです。
slick.js：http://kenwheeler.github.io/slick/
slick.jsを使わないで画像スライダーを実装する方法について解説しています。
最後まで読んでもらいありがとうございます。
Webプログラマ兼ブロガー | プログラミング基礎知識を発信｜Webプログラマ歴は10年以上｜JavaScript,PHP.HTML | 「人生の時間は有限。悪いことをしている時間はない」
→プロフィール