Ad-rotator.js usage guide in detail. There are 3 basic steps to be followed as explained below...

1. HTML

Add any container element like a div, aside, etc... to your HTML. This is where ad-units will be injected.

2. Import the library 📦️

HTML

<head>
  <!-- Include Locally -->
  <link rel="stylesheet" href="./node_modules/ad-rotator/dist/style.css" />
  <!-- OR include via CDN -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ad-rotator/dist/style.css" />
</head>

<body>
  <!-- Include Locally -->
  <script src="./node_modules/ad-rotator/dist/ad-rotator.js"></script>
  <!-- OR include via CDN -->
  <script src="https://cdn.jsdelivr.net/npm/ad-rotator"></script>
</body>

// using ES6 modules
import rotator from 'ad-rotator';
import 'ad-rotator/dist/style.css';

// using RequireJS
const rotator = require('ad-rotator');
require('ad-rotator/dist/style.css');

3. Initialize & configure ⚙️

// ads
const items = [
    { url: 'https://niketpathak.com#1', img: 'https://niketpathak.com/images/works/gkm_pic_sq.jpg'},
    { url: 'https://digitalfortress.tech#2', img: 'https://niketpathak.com/images/works/maestrobits_sq.jpg'}
];

// initialize ad-rotator
const instance = rotator(
  document.getElementById('containerElement'),
  items
);

// start the rotation
instance.start();

HTML

<body>
  <script src="https://cdn.jsdelivr.net/npm/ad-rotator"></script>
  <script>
    // ads
    const items = [
        { url: 'https://niketpathak.com#1', img: 'https://niketpathak.com/images/works/gkm_pic_sq.jpg'},
        { url: 'https://digitalfortress.tech#2', img: 'https://niketpathak.com/images/works/maestrobits_sq.jpg'}
    ];

    // initialize ad-rotator
    const instance = rotator(
      document.getElementById('containerElement'),
      items
    );

    // start the rotation
    instance.start();
  </script>
</body>

CSS

/* set Ad size */
#containerElement {
  height: 250px;
  width: 250px;
}

/* set img elements to be responsive */
img {
  height: 100%;
  width: 100%;
  /* [optional] Stretch img to fit container */
  object-fit: cover;
}

Ad sizes are completely controlled via CSS. Feel free to use media queries to tweak the dimensions. See common sizes for responsive Ads to use ad dimensions that suit your needs.

✨ Demo ✨

Here is a live demo in action. Feel free to tinker with it to see the results in real-time.

<!-- Include assets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ad-rotator/dist/style.css" />
<script src="https://cdn.jsdelivr.net/npm/ad-rotator"></script>

<!-- container element -->
<div id="containerElement"></div>
<hr>
Ad-rotator.js

#containerElement { /* set Ad size */
  height: 250px;
  width: 250px;
  margin: auto; /* optional */
}
img {
  /* set img elements to be responsive */
  height: 100%;
  width: 100%;
  /* Stretch img to fit container [optional] */
  object-fit: cover;
}

/* styling to ignore */
body {
  text-align: center;
}

// initialize ad-rotator
const instance = rotator(
  document.getElementById('containerElement'),
  getAds()
);

// start the rotation
instance.start();

// ads
function getAds() {
  return [
    { url: 'https://fusionplatter.eu#1', img: 'https://niketpathak.com/images/works/gkm_pic_sq.jpg'},
    { url: 'https://digitalfortress.tech#2', img: 'https://niketpathak.com/images/works/maestrobits_sq.jpg'},
    { url: 'https://gospelmusic.io#3', img: 'https://niketpathak.com/images/works/halcyonminds_sq.jpg'}
  ];
}

Usage

1. HTML

2. Import the library 📦️

3. Initialize & configure ⚙️

✨ Demo ✨