Create a README document.

README.md

@@ -1 +1,121 @@
-Work in progress.
+#Splide
+[Splide](https://splidejs.com/) is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.
+
+* [Demo](https://splidejs.com/)
+* [Documents](https://splidejs.com/documents/)
+
+## Features
+* Pure JavaScript without any dependencies
+* Small size, less than 26kB(10kB gzipped)
+* Flexible and extensible
+* Multiple slides
+* Slide or fade transition by CSS
+* Responsive, supporting breakpoints
+* Accepting CSS relative units, such as vw, %, rem, etc.
+* No need to crop images
+* Autoplay with progress bar and play/pause buttons
+* "Right to left" and vertical direction
+* Mouse drag and touch swipe
+* Nested slider
+* Lazy loading
+* Thumbnail slider
+* Accessibility friendly, supporting keyboard control and ARIA attributes
+* Internet Explorer 10
+
+## Installation
+There are 3 ways to install the Splide on your site.
+* NPM
+* Download
+* CDN
+Only NPM way is explained in the following steps. Visit [this page](https://splidejs.com/getting-started/) for other methods.
+
+1. Get the latest version by NPM:
+    ```bash
+    $ npm install @splidejs/splide
+    ```
+1. Link to the stylesheet:
+    ```html
+    <link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">
+    ```
+1. Write HTML for building a slider:
+    ```html
+    <div id="#splide" class="splide">
+        <div class="splide__track">
+            <ul class="splide__list">
+                <li class="splide__slide">Slide 01</li>
+                <li class="splide__slide">Slide 02</li>
+                <li class="splide__slide">Slide 03</li>
+            </ul>
+        </div>
+    </div>
+    ```
+1. Initialize Splide. The selector accepts an ID, a class name or an Element itself:
+    ```javascript
+    import splide from '@splidejs/splide';
+    splide( '#splide' ).mount();
+    ```
+    Note that only the first element will be initialized even if using a class name.
+
+## Options
+### Changing Options
+Pass an object to the second argument of ```splide()```:
+```javascript
+splide( '#splide', {
+	type   : 'loop',
+	perPage: 3,
+} );
+```
+Or set a ```data-splide``` attribute to a root element in a JSON format: 
+```html
+<div id="#splide" class="splide" data-splide="{"type":"loop","perPage":3}">
+</div>
+```
+### Available Options
+Here is a list of options and brief explanations. Visit [this page] for more details.
+
+* **type** Determine a slider type.
+* **rewind** Whether to rewind a slider before the first slide or after the last one.
+* **speed** Transition speed in milliseconds.
+* **width** Define slider max width.
+* **height** Define slider height.
+* **fixedWidth** Fix width of slides.
+* **fixedHeight** Fix height of slides.
+* **heightRatio** Determine height of slides by ratio to a slider width.
+* **perPage** Determine how many slides should be displayed per page.
+* **perMove** Determine how many slides should be moved when a slider goes to next or previous page.
+* **start** Start index.
+* **focus** Determine which slide should be focused.
+* **gap** Gap between slides.
+* **padding** Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
+* **easing** Animation timing function for CSS transition.
+* **arrows** Whether to append arrows.
+* **arrowPath** Change the arrow SVG path.
+* **pagination** Whether to append pagination(indicator dots).
+* **autoplay** Whether to enable autoplay.
+* **interval** Autoplay interval in milliseconds.
+* **pauseOnHover** Whether to stop autoplay while a slider is hovered.
+* **pauseOnFocus** Whether to stop autoplay while a slider elements are focused.
+* **lazyLoad** Enable lazy load for images.
+* **preloadPages** Determine how many pages around an active slide should be loaded beforehand. This only works the lazyLoad option is “nearby”.
+* **keyboard** Whether to control a slider via keyboard.
+* **drag** Whether to allow mouse drag and touch swipe.
+* **flickThreshold** Threshold for determining if the action is “flick” or “swipe”.
+* **flickPower** Determine power of flick. The larger number this is, the farther a slider runs by flick.
+* **flickMaxPages** Limit a number of pages to move by flick.
+* **direction** Slider direction.
+* **cover** Whether to convert an img src to background-image of its parent element. height, fixedHeight or heightRatio is required.
+* **accessibility** Whether to enable accessibility(ARIA attributes) or not.
+* **isNavigation** Determine if a slider is navigation for another.
+* **trimSpace** Whether to trim spaces before the fist slide or after the last one.
+* **breakpoints** Breakpoints definitions.
+* **classes** Collection of class names.
+* **i18n** Collection of texts for i18n.
+
+## API and Extension
+Splide provides some APIs and the way to customize the behaviour programmatically.
+* [APIs](https://splidejs.com/apis/)
+* [Extension](https://splidejs.com/extension/)
+
+## License
+Splide is released under the MIT license.  
+© 2019 Naotoshi Fujita