improve readme

berndartmueller · Aug 27, 2020 · 58c5d97 · 58c5d97
1 parent 4e054cf
commit 58c5d97
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,8 @@
 <!-- PROJECT SHIELDS -->
 
-[![Contributors][contributors-shield]][contributors-url]
-[![Forks][forks-shield]][forks-url]
-[![Stargazers][stars-shield]][stars-url]
-[![Issues][issues-shield]][issues-url]
-[![MIT License][license-shield]][license-url]
 ![size][size-shield]
 [![Build Status](https://travis-ci.org/berndartmueller/virchual.svg?branch=master)](https://travis-ci.org/berndartmueller/virchual)
+[![twitter][twitter-shield]][twitter-url]
 
 <!-- PROJECT LOGO -->
 <br />
@@ -15,100 +11,102 @@
     <img src="images/logo.png" alt="Logo" width="400">
   </a>
 
-  <h3 align="center" style="font-weight: bold;">virchual</h3>
+  <h3 align="center" style="font-weight: bold;">virchual [virtual]</h3>
 
   <p align="center">
-    Super-fast, lightweight (6kB) image slider and carousel, written in TypeScript without any dependencies.
+    Super-fast, lightweight (<2.8kB) slider/carousel with virtual slides. Written in TypeScript. Tree-shakeable. 0 dependencies!
     <br />
     <br />
-    <a href="https://github.com/berndartmueller/virchual"><strong>Explore the docs »</strong></a>
+    <a href="https://github.com/berndartmueller/virchual"><strong>View Demo »</strong></a>
     <br />
     <br />
-    <a href="https://github.com/berndartmueller/virchual">View Demo</a>
-    ·
-    <a href="https://github.com/berndartmueller/virchual/issues">Report Bug</a>
-    ·
-    <a href="https://github.com/berndartmueller/virchual/issues">Request Feature</a>
   </p>
 </p>
 
 <!-- TABLE OF CONTENTS -->
 
 ## Table of Contents
 
-- [About the Project](#about-the-project)
-  - [Built With](#built-with)
-- [Getting Started](#getting-started)
-  - [Prerequisites](#prerequisites)
-  - [Installation](#installation)
+- [About](#about)
+- [Installation](#installation)
 - [Usage](#usage)
-- [Roadmap](#roadmap)
 - [Contributing](#contributing)
 - [License](#license)
 - [Contact](#contact)
-- [Acknowledgements](#acknowledgements)
 
 <!-- ABOUT THE PROJECT -->
 
-## About The Project
+## About
 
-[![Product Name Screen Shot][product-screenshot]](https://example.com)
+This image swiper/slider/carousel library, written in TypeScript, aims to provide a high-performance slider best used when having many instances on a page (e.g. list of cards where each card has a swiper gallery - like Airbnb or hometogo).
 
-This swiper library written in TypeScript aims to provide a high-performance swiper carousel best used when multiple instances on a page are necessary (e.g. list of cards where each card has a swiper gallery - Airbnb, Hometogo,...).
+Virchual uses virtual slides to only render visible slides. No unnecessary DOM elements.
 
-To achieve this goal, this swiper carousel uses virtual slides to only render those slides which are really necessary.
+## Installation
 
-### Built With
-
-- TypeScript
+```sh
+$ npm install virchual
 
-<!-- GETTING STARTED -->
+or
 
-## Getting Started
+$ yarn install virchual
+```
 
-To get a local copy up and running follow these simple steps.
+<!-- USAGE EXAMPLES -->
 
-### Prerequisites
+## Usage
 
-This is an example of how to list things you need to use the software and how to install them.
+Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
 
-- npm
+Example HTML:
 
-```sh
-npm install virchual
+```html
+<div class="virchual">
+  <div class="virchual__frame"></div>
+</div>
 ```
 
-### Installation
+```javascript
+import { Virchual } from 'virchual';
 
-1. Clone the repo
+const slider = new Virchual(document.querySelector('.virchual'), {
+  slides: () => {
+    return [];
+  },
+});
 
-```sh
-git clone github.com/berndartmueller/virchual.git
+slider.mount();
 ```
 
-2. Install NPM packages
-
-```sh
-npm install
-```
+## Options
 
-<!-- USAGE EXAMPLES -->
+| Name                 | Type     | Description                                  | Required | Default  |
+| -------------------- | -------- | -------------------------------------------- | -------- | -------- |
+| `slides`             | `Array   | Function`                                    | Slides   | Yes      |
+| `speed`              | `Number` | Slide transition speed                       | No       | 200      |
+| `easing`             | `String` | Slide transition easing                      | No       | ease-out |
+| `transitionDuration` | `Number` | staying duration of per slide/swipe item     | No       | 200ms    |
+| `window`             | `Number` | How many slide clones on left and right side | No       | 1        |
 
-## Usage
+<br/>
 
-Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
+<!-- CONTRIBUTING -->
 
-_For more examples, please refer to the [Documentation](https://example.com)_
+## Contributing
 
-<!-- ROADMAP -->
+### Getting Started
 
-## Roadmap
+1. Clone the repo
 
-See the [open issues](https://github.com/berndartmueller/virchual/issues) for a list of proposed features (and known issues).
+```sh
+git clone github.com/berndartmueller/virchual.git
+```
 
-<!-- CONTRIBUTING -->
+2. Install NPM packages
 
-## Contributing
+```sh
+npm install
+```
 
 Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
 
@@ -130,27 +128,9 @@ Distributed under the MIT License. See `LICENSE` for more information.
 
 Bernd Artmüller - [@berndartmueller](https://twitter.com/berndartmueller) - hello@berndartmueller.com
 
-Project Link: [https://github.com/berndartmueller/virchual](https://github.com/berndartmueller/virchual)
-
-<!-- ACKNOWLEDGEMENTS -->
-
-## Acknowledgements
-
-Huge credits to [https://github.com/Splidejs/splide](https://github.com/Splidejs/splide) by NaotoshiFujita. Splide was used as a boilerplate for my TypeScript implementation. Great slider and very well implemented!
-
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
 
-[contributors-shield]: https://img.shields.io/github/contributors/berndartmueller/virchual.svg?style=flat-square
-[contributors-url]: https://github.com/berndartmueller/virchual/graphs/contributors
-[forks-shield]: https://img.shields.io/github/forks/berndartmueller/virchual.svg?style=flat-square
-[forks-url]: https://github.com/berndartmueller/virchual/network/members
-[stars-shield]: https://img.shields.io/github/stars/berndartmueller/virchual.svg?style=flat-square
-[stars-url]: https://github.com/berndartmueller/virchual/stargazers
-[issues-shield]: https://img.shields.io/github/issues/berndartmueller/virchual.svg?style=flat-square
-[issues-url]: https://github.com/berndartmueller/virchual/issues
-[license-shield]: https://img.shields.io/github/license/berndartmueller/virchual.svg?style=flat-square
-[license-url]: https://github.com/berndartmueller/virchual/blob/master/LICENSE
 [twitter-shield]: https://img.shields.io/badge/-Twitter-black.svg?style=flat-square&logo=twitter&colorB=555
 [twitter-url]: https://www.twitter.com/berndartmueller
 [product-screenshot]: images/screenshot.png

diff --git a/examples/src/index.html b/examples/src/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="index.css" />
+    <link rel="stylesheet" href="dist/index.bundle.css" />
     <style>
       .image-swiper {
         border: 1px solid #ccc;
@@ -19,9 +19,9 @@
     </style>
   </head>
   <body>
-    <div class="virchual-container image-swiper">
+    <div class="virchual image-swiper">
       <!-- Additional required wrapper -->
-      <div class="virchual__frame" style="height: 100%;">
+      <div class="virchual__frame" style="height: 100%">
         <div class="virchual__slide">
           <picture
             ><source
@@ -47,7 +47,7 @@
           role="presentation"
           aria-hidden="true"
           focusable="false"
-          style="height: 20px; width: 20px; display: block; fill: currentcolor;"
+          style="height: 20px; width: 20px; display: block; fill: currentcolor"
         >
           <path
             d="m10.8 16c-.4 0-.7-.1-.9-.4l-6.8-6.7c-.5-.5-.5-1.3 0-1.8l6.8-6.7c.5-.5 1.2-.5 1.7 0s .5 1.2 0 1.7l-5.8 5.9 5.8 5.9c.5.5.5 1.2 0 1.7-.2.3-.5.4-.8.4"
@@ -61,7 +61,7 @@
           role="presentation"
           aria-hidden="true"
           focusable="false"
-          style="height: 20px; width: 20px; display: block; fill: currentcolor;"
+          style="height: 20px; width: 20px; display: block; fill: currentcolor"
         >
           <path
             d="m5.3 16c .3 0 .6-.1.8-.4l6.8-6.7c.5-.5.5-1.3 0-1.8l-6.8-6.7c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l5.8 5.9-5.8 5.9c-.5.5-.5 1.2 0 1.7.2.3.5.4.9.4"
@@ -70,6 +70,6 @@
       </button>
     </div>
 
-    <script src="index.bundle.js"></script>
+    <script src="dist/index.bundle.js"></script>
   </body>
 </html>
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -1,4 +1,4 @@
-.virchual-container {
+.virchual {
   margin-left: auto;
   margin-right: auto;
   position: relative;