v0.0.2

suppot thumbs

.babelrc

@@ -18,6 +18,7 @@
     }
   },
   "plugins": [
+    "transform-runtime",
     "syntax-dynamic-import"
   ],
   "ignore": [

README.md

@@ -1,4 +1,68 @@
-# awesome-swiper
-based on [swiper](https://github.com/nolimits4web/Swiper)
+# Awesome Swiper
 
-coding!
+[![NPM version][npm-image]][npm-url]
+[![build status][travis-image]][travis-url]
+[![David deps][david-image]][david-url]
+[![devDependencies Status][david-dev-image]][david-dev-url]
+[![node version][node-image]][node-url]
+[![npm download][download-image]][download-url]
+[![npm license][license-image]][download-url]
+
+[npm-image]: https://img.shields.io/npm/v/awesome-swiper.svg?style=flat-square
+[npm-url]: https://npmjs.org/package/awesome-swiper
+[travis-image]: https://img.shields.io/travis/cycdpo/awesome-swiper.svg?style=flat-square
+[travis-url]: https://travis-ci.org/cycdpo/awesome-swiper
+[david-image]: https://img.shields.io/david/cycdpo/awesome-swiper.svg?style=flat-square
+[david-url]: https://david-dm.org/cycdpo/awesome-swiper
+[david-dev-image]: https://david-dm.org/cycdpo/awesome-swiper/dev-status.svg?style=flat-square
+[david-dev-url]: https://david-dm.org/cycdpo/awesome-swiper?type=dev
+[node-image]: https://img.shields.io/badge/node.js-%3E=_6.0-green.svg?style=flat-square
+[node-url]: http://nodejs.org/download/
+[download-image]: https://img.shields.io/npm/dm/awesome-swiper.svg?style=flat-square
+[download-url]: https://npmjs.org/package/awesome-swiper
+[license-image]: https://img.shields.io/npm/l/awesome-swiper.svg?style=flat-square
+
+awesome-swiper based on [swiper](https://github.com/nolimits4web/Swiper). ([Releases](https://github.com/cycdpo/awesome-swiper/releases) | [Demo](https://cycdpo.github.io/awesome-swiper/))
+
+
+## Install
+```shell
+# via npm
+$ npm install awesome-swiper --save
+
+# or via yarn
+$ yarn add awesome-swiper
+```
+
+## Usage
+```javascript
+import AwesomeSwiper from 'awesome-swiper';
+
+// OR
+const AwesomeSwiper = require('awesome-swiper');
+
+let awesomeSwiper = new AwesomeSwiper().init(context [, ...config]);
+
+// if need thumbs
+let awesomeSwiper = new AwesomeSwiper()
+                        .init(context [, ...config])
+                        .addThumbs(thumbsContext [, ...thumbsConfig]);
+```
+
+## Use in browser
+```html
+<link href="AwesomeSwiper.min.css" rel="stylesheet">
+
+<div id="basic" class="swiper-container">
+  <div class="swiper-wrapper">
+    <div class="swiper-slide">slide1</div>
+    <div class="swiper-slide">slide2</div>
+    <div class="swiper-slide">slide3</div>
+  </div>
+</div>
+
+<script src="AwesomeSwiper.min.js"></script>
+<script>
+  new AwesomeSwiper().init('basic');
+</script>
+```

build/AwesomeSwiper.css

@@ -1,13 +1,13 @@
 /**
- * Swiper 4.0.5
+ * Swiper 4.0.7
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * http://www.idangero.us/swiper/
  *
  * Copyright 2014-2017 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: November 7, 2017
+ * Released on: November 28, 2017
  */
 .swiper-container {
   margin: 0 auto;
@@ -600,11 +600,18 @@ button.swiper-pagination-bullet {
   /* Windows 8 IE 10 fix */
   -ms-perspective: 1200px;
 }
-.swiper-explain {
+.swiper-img, .swiper-explain, .swiper-img > img {
   position: absolute;
   z-index: 1;
 }
 
+.swiper-img {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .swiper-explain {
   left: 0;
   bottom: 0;
@@ -614,3 +621,46 @@ button.swiper-pagination-bullet {
   color: white;
   text-align: left;
 }
+
+.swiper-explain.src-style-main__bottomSpace {
+  padding-bottom: 25px;
+}
+
+.swiper-img {
+  overflow: hidden;
+}
+
+.swiper-img > img {
+  display: block;
+  left: -100%;
+  top: -100%;
+  right: -100%;
+  bottom: -100%;
+  margin: auto;
+  width: 100%;
+}
+
+.src-style-main__thumbsWrapper .swiper-slide {
+  height: 100%;
+  opacity: 0.4;
+  cursor: pointer;
+}
+
+.src-style-main__thumbsWrapper .swiper-slide.src-style-main__active {
+  opacity: 1;
+}
+
+.src-style-main__thumbsWrapper.swiper-container-vertical .swiper-img > img {
+  width: auto;
+  height: 100%;
+}
+
+.swiper-pagination-bullet {
+  background-color: #fff;
+  opacity: .6;
+}
+
+.swiper-pagination-bullet-active {
+  background-color: #fff;
+  opacity: .8;
+}