https://github.com/appleple/js-rotation-banner

https://github.com/appleple/js-rotation-banner

Last synced: over 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/appleple/js-rotation-banner
• Owner: appleple
• Created: 2022-07-05T05:15:45.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-05T07:19:12.000Z (about 4 years ago)
• Last Synced: 2025-01-09T11:55:39.493Z (over 1 year ago)
• Language: TypeScript
• Size: 398 KB
• Stars: 0
• Watchers: 5
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# js-rotation-banner

[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/appleple/document-outliner/master/LICENSE)

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

## Usage

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

```html

```

```html

```

cfg-csv.js

```js

document.addEventListener("DOMContentLoaded",  () => {

    new RotationBanner({

              url: "sampleUrl",

              rel: "sponsored",

              aTagclass: "banner",

              loading: "lazy",

          });

});

```

### Basic Standalone Usage

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

```html

サンプルです



サンプルです



サンプルです



```


### Attribute

data-quantity → 表示させる枚数

data-offset → 指定した日付によってバナーを並び替える

data-id → 並び替える数字を指定

### Option

	

		variable

		description

		default

	

	

		url

		用意した画像データをAPIで持ってくる為に必要なurl

		初期値無し

	

	

		rel

		スポンサーさんからの情報にはつけなきゃいけない決まり事

		初期値無し

	

	

		aTagclass

		aタグのクラス

		banner

	

	

		loading

		遅延読み込み

		lazy