jQueryライブラリを使用して、簡単スライダー形式での画像表示

#JavaScript #技術

記事をシェア：

コピー

こんにちは、樋口です。

今回は、スライダー形式で画像を表示ができるslickについて紹介していきます。

今回は下記ライブラリを使用して説明をしていきます。

jQuery: 1.10.2
slick.js: 1.9.0
BootStrap: 3.2.0

ライブラリの入手

slick.jsは下記サイトよりダウンロードできます。
slick.jsダウンロード(GitHub)

ZIPファイルダウンロード後、slick-masterフォルダの中にある、slickフォルダを任意の場所に設置します。

これで準備は完了です。

フォルダ階層

今回は、下記フォルダ階層でサンプルを作成していきます。

HTMLファイル

初めに、HTMLファイルを作成します。

– index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>slick.jsサンプル</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <link rel="stylesheet" href="./slick/slick.css">
    <link rel="stylesheet" href="./slick/slick-theme.css">
	<style type="text/css">
	<!--
		.container {
		  width: 1160px;
		  margin: 0 auto;
		  padding: 50px 40px;
		  box-sizing: border-box;
		}
		.tatle-style {
		  margin: 0 0 50px;
		  padding-bottom: 15px;
		  border-bottom: 1px solid #eeeeee;
		}
	-->
	.slick-next {
		right: 555px;
		z-index: 99;
	}
	.slick-prev {
		left: 15px;
		z-index: 100;
	}
	.slick-prev:before,
	.slick-next:before {
		color: #000;	
	}
	</style>
  </head>
  <body>  
	<div id="wrap">
	  <div class="container">
		<div class="col-lg-12">
		  <div class="form-group" style="text-align: center;">
			<h1 class="tatle-style">slick.jsサンプル</h1>
		  </div>
		  <div class="form-group">
			<span></span>
		  </div>
		  <form class="form-signin" id="commentForm">
            <div class="col-lg-12" style="margin-top: 10px; margin-left: 290px;">
              <ul class="slider">
				  <li><a href="#"><img src="./images/main1.png" style="width: 400px; height: 300px;"></a></li>
				  <li><a href="#"><img src="./images/main2.png" style="width: 400px; height: 300px;"></a></li>
				  <li><a href="#"><img src="./images/main3.png" style="width: 400px; height: 300px;"></a></li>
			    </ul>
            </div>
		  </form>
		</div>
	  </div>
	</div>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./slick/slick.min.js"></script>
    <script type="text/javascript" src="./test.js"></script>
  </body>
</html>

10～11行目：
　slick.jsで使用するCSSを読み込みます。

26～37行目：
　スライダーの矢印の背景色を設定しています。

52～56行目：
　スライダーで表示する画像の一覧を設定します。
　次項で説明を行うJSで使用する、任意のクラス名を指定してください。

63行目：
　slick.jsで使用するjavaScriptを読み込みます。

以上で、HTMLは完成です。
次に、スライドを使用するためのjavaScriptについて説明します

javaScriptファイル

ライブラリ実行用のjavaScriptファイルを作成します。

– test.js

$(function() {
    $('.slider').slick();
});

2行目：
　slickを使用するため、対象のクラスにslick関数を設定します。

実行結果

最後に

今回紹介したライブラリを使用すれば、スライドでの写真表示を簡単に行うことができます。
今回は一番簡単に表示する方法について説明しました。本ライブラリでは、他にも表示する方法ありますので興味ある方は是非調べてみてください。

今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。
それではまた。

《関連記事》