AMG Solution

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

こんにちは、樋口です。
 
今回は、スライダー形式で画像を表示ができるslickについて紹介していきます。
 
今回は下記ライブラリを使用して説明をしていきます。

jQuery
1.10.2
slick.js
1.9.0
BootStrap
3.2.0

ライブラリの入手

slick.jsは下記サイトよりダウンロードできます。
slick.jsダウンロード(GitHub)
 
ZIPファイルダウンロード後、slick-masterフォルダの中にある、slickフォルダを任意の場所に設置します。
 
これで準備は完了です。

フォルダ階層

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

test13
 |- index.html
 |- bootstrap.min.css
 |- jquery.js
 |- test.js
 |- slick
  |- slick.js
  |- slick.css
  |- ・・・(省略)

HTMLファイル

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

10~11行目:
 slick.jsで使用するCSSを読み込みます。
 
26~37行目:
 スライダーの矢印の背景色を設定しています。
 
52~56行目:
 スライダーで表示する画像の一覧を設定します。
 次項で説明を行うJSで使用する、任意のクラス名を指定してください。
 
63行目:
 slick.jsで使用するjavaScriptを読み込みます。
 
以上で、HTMLは完成です。
次に、スライドを使用するためのjavaScriptについて説明します

javaScriptファイル

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

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

実行結果

最後に

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

HIGUCHI'S BLOG

樋口一成の記事

樋口一成の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

マイナビ2019 採用エントリーはじめました。
LOADING