add gutter option

.env

@@ -0,0 +1,2 @@
+#.env
+COMPOSE_HTTP_TIMEOUT=36000

README.md

@@ -1,5 +1,5 @@
 # tiny-slider
-![version](https://img.shields.io/badge/Version-0.3.5-green.svg)   
+![version](https://img.shields.io/badge/Version-0.4.0-green.svg)   
 Tiny slider for all purposes, inspired by [Owl Carousel](http://owlcarousel.owlgraphic.com/).
 Works on morden browsers and IE8+.   
 [demo](http://creatiointl.org/william/tiny-slider/v1/demo/)   
@@ -32,7 +32,7 @@ Include tiny-slider
 ```html
 <link rel="stylesheet" href="tiny-slider.css">
 
-<!--[if (lt IE 9)]><script src="tiny-slider.helper.ie8.js"></script><![endif]-->
+<!--[if (lt IE 9)]><script src="tiny-slider.ie8.js"></script><![endif]-->
 <script src="tiny-slider.js"></script>
 ```
 Or tiny-slider.native + [go-native](https://github.com/ganlanyuan/go-native),
@@ -89,6 +89,7 @@ Default:
 {
   container: document.querySelector('.slider'),
   items: 1,
+  gutter: 0,
   fixedWidth: false,
   maxContainerWidth: false,
   slideByPage: false,
@@ -111,14 +112,11 @@ Default:
 }
 ```
 
-#### * Padding
-There is no option for `padding`, but you can add it by css 
-```css
-.tiny-slider { margin-right: -10px; }
-.your-slider > div { padding-right: 10px; }
-``` 
+#### Padding
+<del>There is no option for `padding`, but you can add it by css </del>
+Now you can set the gutter using `gutter` option.
 
-#### * Non-javascirpt fallback
+#### Fallback
 ```css
 .no-js .your-slider { 
   overflow-x: auto; 

bower.json

@@ -1,15 +1,13 @@
 {
   "name": "tiny-slider",
-  "version": "0.3.5",
+  "version": "0.4.0",
   "homepage": "https://github.com/ganlanyuan/tiny-slider",
   "authors": [
     "WilliamLin <[email protected]>"
   ],
   "description": "Tiny slider for all purposes.",
   "main": [
-    "src/tiny-slider.scss",
-    "dist/tiny-slider.helper.ie8.js",
-    "dist/tiny-slider.native.js",
+    "dist/tiny-slider.css",
     "dist/tiny-slider.js"
   ],
   "moduleType": [],
@@ -26,7 +24,7 @@
     "tests"
   ],
   "devDependencies": {
-    "go-native": "0.0.3"
+    "go-native": "0.0.8"
   },
   "dependencies": {}
 }

changelog.md

@@ -1,4 +1,4 @@
-#Changelog
+# Changelog
 
 <!-- #### v1.0.0 beta
 - Totally rewrite with a simple function, co-work with [go-native](https://github.com/ganlanyuan/go-native).
@@ -26,6 +26,11 @@ class `tiny-next` => attribute `[data-controls="next"`.
 - Fixed: an issue that navs are still active when slides cann't fill their parent.
 - Fixed: an issue with `items`, when container width is shorter than one slide in fixedWidth slider.
  -->
+
+#### v0.4.0
+- Added: `gutter` option.
+- Renamed `tiny-slider.helper.ie8.js` to `tiny-slider.ie8.js`.
+
 #### v0.3.5
 - Fix a `package.json` issue.
 

demo/index.html

@@ -124,12 +124,13 @@
     button[aria-selected="true"] { background: #999; }
   </style>
   <script src="prism/prism.js"></script>
-  <script src="../dist/tiny-slider.helper.ie8.js"></script>
-  <script src="../dist/tiny-slider.js"></script>
+  <script src="../dist/min/tiny-slider.ie8.js"></script>
+  <script src="../dist/min/tiny-slider.js"></script>
   <script type="text/javascript">
     gn.ready(function () {
       tinySlider({
         container: document.querySelector('.responsive'),
+        gutter: 10,
         responsive: {
           500: 2,
           800: 3,
@@ -138,6 +139,7 @@
 
       tinySlider({
         container: document.querySelector('.fixed-width'),
+        gutter: 10,
         fixedWidth: 200,
         maxContainerWidth: 900,
         loop: false
@@ -146,6 +148,7 @@
       tinySlider({
         container: document.querySelector('.customize'),
         items: 3,
+        gutter: 10,
         controlsContainer: document.querySelector('.slider-controls'),
         navContainer: document.querySelector('.thumbnails'),
         lazyload: true
@@ -154,19 +157,22 @@
       tinySlider({
         container: document.querySelector('.non-loop'),
         items: 3,
+        gutter: 10,
         loop: false
       }).init();
 
       tinySlider({
         container: document.querySelector('.slide-by-page'),
         items: 3,
+        gutter: 10,
         slideByPage: true
       }).init();
 
       tinySlider({
         container: document.querySelector('.autoplay'),
         items: 3,
         autoplay: true,
+        gutter: 10,
         speed: 300,
         autoplayTimeout: 3000,
         autoplayText: ['▶', '❚❚']
@@ -175,12 +181,14 @@
       tinySlider({
         container: document.querySelector('.arrow-keys'),
         items: 3,
+        gutter: 10,
         arrowKeys: true
       }).init();
 
       tinySlider({
         container: document.querySelector('.auto-height'),
         autoHeight: true,
+        gutter: 10,
         items: 1
       }).init();
   });
@@ -525,7 +533,7 @@ <h2>arrow keys</h2>
     <h2>auto height</h2>
     <div class="auto-height">
       <div>
-        <img src="" alt="">
+        <img src="http://lorempixel.com/900/400/city?2" alt="">
         <p>Lorem ipsum dolor sit amet</p>
       </div>
       <div>