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

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

sponsors

使用方法

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プラグインではないでしょうか。

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors