JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」

JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。
jQueryプラグインのdcdeiv/jsonslider ? GitHubを利用することでその手間が少し軽減できるかもしれません。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」サンプル

使用方法 dcdeiv/jsonslider ? GitHubからファイル一式をダウンロード。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.jsonslider.js"></script>
<script>
$( document ).ready(function() {
$( '.class名' ).jsonSlider({
json: 'store.json',
Class: 'slider-active', //default class
aspectRatio: '16:9', //aspect ratio of the slider. Chose it according to pictures aspect ratio.
css: { //don't touch these parametres
parent: {
position: 'relative'
},
wrap: {
position: 'relative',
width: '100%',
height: '100%',
margin: '0 auto',
padding: 0,
backgroundColor: 'inherit',
overflow: 'hidden'
},
figure: {
position: 'absolute'
},
img: {
width: 'auto',
maxWidth: '100%',
lineHeight: 0,
margin: '0 auto'
}
}
});
});
</script>

store.jsonには画像の記述を書きます。
{
"pictures": [
{
"url": "画像パス"
},
//以下画像分
}

あとは、.class名を記述すればその場所に表示されます。
とりあえず手軽に表示させたいという希望の際には検討できるjQueryプラグインではないでしょうか。
JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」サンプル

sponsors

「JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」」をシェアする

記事作成:
記事URL:

TOP > > > JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」