docs

README.md

@@ -24,6 +24,15 @@
   </p>
 </p>
 
+## Why Virchual?
+
+- Lightweight. Only **<2.8kB** (gzipped).
+- **Virtual slides** to keep DOM elements at a minimum (Lighthouse ❤️ it)
+- Instagram like **pagination bullets**.
+- **0 dependencies**. Everything included.
+
+<br />
+
 <!-- TABLE OF CONTENTS -->
 
 ## Table of Contents
@@ -70,11 +79,16 @@ Example HTML:
 ```
 
 ```ts
+import 'virchual/dist/index.css';
+
 import { Virchual } from 'virchual';
 
 const slider = new Virchual(document.querySelector('.virchual'), {
   slides: () => {
-    return [];
+    return [
+      '<img src="image.jpg"/>', // slide 1
+      '<img src="image2.jpg"/>', // slide 2
+    ];
   },
 });
 
@@ -108,7 +122,7 @@ slider.mount();
 Virchual(element: HTMLElement, settings: VirchualSettings): Virchual
 ```
 
-Virchual constructor. It creates a new Virchual slider instance.
+Virchual constructor. Creates a new Virchual slider instance.
 
 ---
 
@@ -120,28 +134,46 @@ Virchual constructor. It creates a new Virchual slider instance.
 Virchual.mount();
 ```
 
-### Virchual#unmount
+Mount slider and bind DOM events.
+
+### Virchual#on
 
 ---
 
 ```ts
-Virchual.unmount();
+Virchual.on(events: string, handler: () => {}, elm: HTMLElement);
 ```
 
-### Virchual#on
-
----
+Add event listener for given event(s).
 
 ```ts
-Virchual.on();
+instance.on('mount', () => {
+  console.log('Slider mounted.');
+});
+
+// multiple events can be defined by seperating with a whitespace
+
+instance.on('mount unmounted', () => {
+  console.log('Slider mounted/unmounted.');
+});
 ```
 
 ### Virchual#off
 
 ---
 
 ```ts
-Virchual.off();
+Virchual.off(events: string);
+```
+
+Remove event listener for given event(s).
+
+```ts
+instance.off('mount');
+
+// multiple events can be defined by seperating with a whitespace
+
+instance.off('mount unmounted');
 ```
 
 ### Virchual#prev
@@ -152,6 +184,8 @@ Virchual.off();
 Virchual.prev();
 ```
 
+Move to previous slide. Rewind in case first slide is currently shown.
+
 ### Virchual#next
 
 ---
@@ -160,6 +194,18 @@ Virchual.prev();
 Virchual.next();
 ```
 
+Move to next slide. Rewind in case last slide is currently shown.
+
+### Virchual#destroy
+
+---
+
+```ts
+Virchual.destroy();
+```
+
+Unmount slider, remove DOM events for this instance.
+
 <br/>
 
 <!-- CONTRIBUTING -->

src/virchual.ts

@@ -94,12 +94,21 @@ export class Virchual {
   }
 
   /**
-   * Unmount components and cleanup events.
+   * Disable Virchual instance and all user interactions (changing slides)
+   *
+   * @TODO
    */
-  unmount() {
-    this.eventBus.destroy();
+  disable() {
+    return;
+  }
 
-    this.eventBus.emit('unmounted');
+  /**
+   * Enable previously disabled Virchual instance. Enable user interaction.
+   *
+   * @TODO
+   */
+  enable() {
+    return;
   }
 
   /**
@@ -111,8 +120,8 @@ export class Virchual {
    * @param elm  Optional. Native event will be listened to when this arg is provided.
    * @param opts Optional. Options for addEventListener.
    */
-  on(events: string, handler: identity, elm: (Window & typeof globalThis) | Element = null, opts: Record<string, unknown> = {}) {
-    this.eventBus.on(events, handler, elm, opts);
+  on(events: string, handler: identity) {
+    this.eventBus.on(events, handler);
   }
 
   /**
@@ -121,8 +130,8 @@ export class Virchual {
    * @param events - A event name.
    * @param elm    - Optional. removeEventListener() will be called when this arg is provided.
    */
-  off(events: string, elm: (Window & typeof globalThis) | Element = null) {
-    this.eventBus.off(events, elm);
+  off(events: string) {
+    this.eventBus.off(events);
   }
 
   /**
@@ -143,6 +152,15 @@ export class Virchual {
     this.goTo('next');
   }
 
+  /**
+   * Destroy instance, remove DOM events.
+   */
+  destroy() {
+    this.eventBus.destroy();
+
+    this.eventBus.emit('destroy');
+  }
+
   private goTo(control: 'prev' | 'next') {
     const slide = this.slides[this.currentIndex];