appleple / js-rotation-banner

js-rotation-banner

複数のバナー画像を指定した規則通りに並び替えてくれるjsライブラリ

Usage

distの中にあるrotation-banner.bundle.js,rotationbanner.cssを使用したいフォルダに設置して、使用するHTMLファイルのhead要素内にJavaScriptファイルとCSSファイルの読み込みを記述してください。

<script src="/path/to/js/rotation-banner.bundle.js"></script>

<link rel="stylesheet" href="/path/to/js/rotationbanner.css">

cfg-csv.js

document.addEventListener("DOMContentLoaded",  () => {
    new RotationBanner({
              url: "sampleUrl",
              rel: "sponsored",
              aTagclass: "banner",
              loading: "lazy",
          });
});

Basic Standalone Usage

一セット三枚のバナーを計九枚表示させるとき

<p>サンプルです</p>
<div class="js-rotation-banner" data-quantity="3" data-offset="1" data-id="1"></div>
<p>サンプルです</p>
<div class="js-rotation-banner" data-quantity="3" data-offset="1" data-id="2"></div>
<p>サンプルです</p>
<div class="js-rotation-banner" data-quantity="3" data-offset="1" data-id="3"></div>

Attribute

data-quantity → 表示させる枚数
data-offset → 指定した日付によってバナーを並び替える
data-id → 並び替える数字を指定

Option

variable	description	default
url	用意した画像データをAPIで持ってくる為に必要なurl	初期値無し
rel	スポンサーさんからの情報にはつけなきゃいけない決まり事	初期値無し
aTagclass	aタグのクラス	banner
loading	遅延読み込み	lazy