https://github.com/codions/ad-shuffle
This JavaScript package allows for random rotation of banners on a webpage based on configured frequency, start, and end dates, with optional automatic rotation.
https://github.com/codions/ad-shuffle
Last synced: about 1 year ago
JSON representation
This JavaScript package allows for random rotation of banners on a webpage based on configured frequency, start, and end dates, with optional automatic rotation.
- Host: GitHub
- URL: https://github.com/codions/ad-shuffle
- Owner: codions
- Created: 2024-10-02T07:07:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-08T22:49:34.000Z (over 1 year ago)
- Last Synced: 2025-01-25T20:11:18.655Z (over 1 year ago)
- Language: HTML
- Homepage: https://ad-shuffle.codions.dev
- Size: 209 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AdShuffle
This JavaScript package allows for both random and sequential rotation of banners on a webpage based on configured frequency, start, and end dates, with optional automatic rotation.
## Features
- Randomly rotates banners based on frequency.
- Sequential banner rotation when specified.
- Control display with start and end dates.
- Manage multiple banner containers on the same page.
- Easily integrates into HTML via the generated library.
- Automatically applies default styles when using the `ads-styled` class.
- Option to automatically rotate banners at a set interval.
### Usage of Compiled Version
If you just want to use the compiled package, add the generated file `https://ad-shuffle.codions.dev/dist/ad-shuffle.es.js` to your HTML page:
```html
```
## How to Use
After including the script, add the following HTML structure to include banners on your page.
### HTML Implementation Example
Add the `ads-styled` class to your banner to apply the default styles provided by the package:
```html
AdShuffle - Demo
Advertisement
Banner 1 - Frequency 50%
Advertisement
Banner 2 - Frequency 25%
Advertisement
Banner 3 - Frequency 25%
Advertisement
Banner 1 - Frequency 75%
Advertisement
Banner 2 - Frequency 25%
```
### Attributes
- `data-frequency`: Defines the probability of a banner being shown. The value is relative to the other banners in the same container.
- `data-start-date` (optional): Defines the start date when the banner will be eligible for display.
- `data-end-date` (optional): Defines the end date after which the banner will no longer be displayed.
- `class="ads-styled"`: Applies the default style provided by the package.
### Auto-Rotation Parameters
You can enable auto-rotation of banners by adding the following attributes to the `.rb-ads` container:
- `data-auto-rotate="true"`: Enables automatic banner rotation.
- `data-interval="X"`: Defines the interval in seconds between banner switches.
Example usage:
```html
Advertisement
Banner 1 - Frequency 50%
Advertisement
Banner 2 - Frequency 25%
```
In this example, banners will rotate automatically every 5 seconds.
### Sequential Rotation
If you prefer to rotate banners in sequential order (rather than randomly), add the `data-sequential="true"` attribute to the `.rb-ads` container:
```html
Advertisement
Banner 1
Advertisement
Banner 2
Advertisement
Banner 3
```
In this example, banners will rotate sequentially every 3 seconds.
### Installation via NPM (for development)
If you want to develop or customize the package:
1. Clone the repository.
2. Install dependencies with `npm install`.
3. Build the package with `npm run build`.
## License
This project is licensed under the MIT License.