add gutterPosition option

README.md

@@ -1,5 +1,5 @@
 # tiny-slider
-![version](https://img.shields.io/badge/Version-0.4.0-green.svg)   
+![version](https://img.shields.io/badge/Version-0.4.1-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/)   
@@ -90,6 +90,7 @@ Default:
   container: document.querySelector('.slider'),
   items: 1,
   gutter: 0,
+  gutterPosition: 'right',
   fixedWidth: false,
   maxContainerWidth: false,
   slideByPage: false,

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "tiny-slider",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "homepage": "https://github.com/ganlanyuan/tiny-slider",
   "authors": [
     "WilliamLin <[email protected]>"

changelog.md

@@ -27,6 +27,10 @@ class `tiny-next` => attribute `[data-controls="next"`.
 - Fixed: an issue with `items`, when container width is shorter than one slide in fixedWidth slider.
  -->
 
+#### v0.4.1
+- Added: `gutterPosition` option.
+- Fixed: `margin` attribute is added even gutter is 0.
+
 #### v0.4.0
 - Added: `gutter` option.
 - Renamed `tiny-slider.helper.ie8.js` to `tiny-slider.ie8.js`.

demo/index.html

@@ -131,6 +131,7 @@
       tinySlider({
         container: document.querySelector('.responsive'),
         gutter: 10,
+        gutterPosition: 'left',
         responsive: {
           500: 2,
           800: 3,
@@ -140,6 +141,7 @@
       tinySlider({
         container: document.querySelector('.fixed-width'),
         gutter: 10,
+        gutterPosition: 'left',
         fixedWidth: 200,
         maxContainerWidth: 900,
         loop: false
@@ -529,23 +531,23 @@ <h2>arrow keys</h2>
     <h2>auto height</h2>
     <div class="auto-height">
       <div>
-        <img src="http://lorempixel.com/900/400/city?2" alt="">
+        <img src="http://www.trbimg.com/img-57e03d90/turbine/la-1474313761-snap-photo/900/900x400" alt="">
         <p>Lorem ipsum dolor sit amet</p>
       </div>
       <div>
-        <img src="http://lorempixel.com/900/500/people?5" alt="">
+        <img src="http://www.trbimg.com/img-579b906c/turbine/la-fo-gold-cannibal-20160718-snap/900/900x500" alt="">
         <p>Blanditiis sapiente tempora </p>
       </div>
       <div>
-        <img src="http://lorempixel.com/900/450/food?7" alt="">
+        <img src="http://www.trbimg.com/img-57a4c798/turbine/la-fo-gold-daw-yee-myanmar-silver-lake-20160728-snap/900/900x450" alt="">
         <p>At possimus dolorum eligendi repellat</p>
       </div>
       <div>
-        <img src="http://lorempixel.com/900/540/animals?6" alt="">
+        <img src="http://www.trbimg.com/img-57c9f699/turbine/la-fo-orange-county-food-halls-20160814-snap/900/900x540" alt="">
         <p>Neque accusamus inventore rerum</p>
       </div>
       <div>
-        <img src="http://lorempixel.com/900/500/transport?4" alt="">
+        <img src="http://www.trbimg.com/img-57c4c52c/turbine/la-1472513416-snap-photo/900/900x500" alt="">
         <p>Quis deserunt quo sequi qui fugiat nobis </p>
       </div>
     </div>

dist/tiny-slider.js

@@ -570,7 +570,7 @@ if (!Date.now)
 
 /**
   * tiny-slider
-  * @version 0.4.0
+  * @version 0.4.1
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -610,6 +610,7 @@ var tinySlider = (function () {
       container: document.querySelector('.slider'),
       items: 1,
       gutter: 0,
+      gutterPosition: 'right',
       fixedWidth: false,
       maxContainerWidth: false,
       slideByPage: false,
@@ -646,6 +647,7 @@ var tinySlider = (function () {
         sliderCount = sliderItems.length,
         sliderCountUpdated = sliderItems.length,
         gutter = options.gutter,
+        gutterPosition = (options.gutterPosition === 'right') ? 'marginRight' : 'marginLeft',
         fixedWidth = options.fixedWidth,
         controls = options.controls,
         controlsText = options.controlsText,
@@ -784,13 +786,19 @@ var tinySlider = (function () {
     // update slides' width
     function updateLayout() {
       sliderContainer.style.width = slideWidth * sliderCountUpdated + 'px';
-      if (loop) {
-        sliderContainer.style.marginLeft = - (itemsMax * slideWidth) + 'px';
+
+      var ml;
+      if (gutter !== 0 && gutterPosition === 'marginLeft') {
+        ml = (loop)? itemsMax * slideWidth + gutter : gutter;
+      } else {
+        ml = itemsMax * slideWidth;
       }
+      sliderContainer.style.marginLeft = - ml + 'px';
+
       for (var b = sliderCountUpdated; b--;) {
         sliderItems[b].style.width = slideWidth - gutter + 'px';
         if (gutter !== 0) {
-          sliderItems[b].style.marginRight = gutter + 'px';
+          sliderItems[b].style[gutterPosition] = gutter + 'px';
         }
       }
     }

dist/tiny-slider.native.js

@@ -1,6 +1,6 @@
 /**
   * tiny-slider
-  * @version 0.4.0
+  * @version 0.4.1
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -40,6 +40,7 @@ var tinySlider = (function () {
       container: document.querySelector('.slider'),
       items: 1,
       gutter: 0,
+      gutterPosition: 'right',
       fixedWidth: false,
       maxContainerWidth: false,
       slideByPage: false,
@@ -76,6 +77,7 @@ var tinySlider = (function () {
         sliderCount = sliderItems.length,
         sliderCountUpdated = sliderItems.length,
         gutter = options.gutter,
+        gutterPosition = (options.gutterPosition === 'right') ? 'marginRight' : 'marginLeft',
         fixedWidth = options.fixedWidth,
         controls = options.controls,
         controlsText = options.controlsText,
@@ -214,13 +216,19 @@ var tinySlider = (function () {
     // update slides' width
     function updateLayout() {
       sliderContainer.style.width = slideWidth * sliderCountUpdated + 'px';
-      if (loop) {
-        sliderContainer.style.marginLeft = - (itemsMax * slideWidth) + 'px';
+
+      var ml;
+      if (gutter !== 0 && gutterPosition === 'marginLeft') {
+        ml = (loop)? itemsMax * slideWidth + gutter : gutter;
+      } else {
+        ml = itemsMax * slideWidth;
       }
+      sliderContainer.style.marginLeft = - ml + 'px';
+
       for (var b = sliderCountUpdated; b--;) {
         sliderItems[b].style.width = slideWidth - gutter + 'px';
         if (gutter !== 0) {
-          sliderItems[b].style.marginRight = gutter + 'px';
+          sliderItems[b].style[gutterPosition] = gutter + 'px';
         }
       }
     }

gulpfile.js

@@ -47,16 +47,15 @@ var config = {
         "bower_components/go-native/src/ie8/nextElementSibling.js",
       ]],
     name: ['tiny-slider.js', 'tiny-slider.native.js', 'tiny-slider.ie8.js'],
-    options:[{}, {
-        mangle: false,
-        output: {
-          quote_keys: true,
-        },
-        compress: {
-          properties: false,
-        }
+    options: {
+      // mangle: false,
+      output: {
+        quote_keys: true,
+      },
+      compress: {
+        properties: false,
       }
-    ],
+    },
   },
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiny-slider",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Pure tiny javascript slider for all purposes.",
   "main": "dist/tiny-slider.js",
   "style": "dist/tiny-slider.css",

src/tiny-slider.native.js

@@ -1,6 +1,6 @@
 /**
   * tiny-slider
-  * @version 0.4.0
+  * @version 0.4.1
   * @author William Lin
   * @license The MIT License (MIT)
   * @github https://github.com/ganlanyuan/tiny-slider/
@@ -40,6 +40,7 @@ var tinySlider = (function () {
       container: document.querySelector('.slider'),
       items: 1,
       gutter: 0,
+      gutterPosition: 'right',
       fixedWidth: false,
       maxContainerWidth: false,
       slideByPage: false,
@@ -76,6 +77,7 @@ var tinySlider = (function () {
         sliderCount = sliderItems.length,
         sliderCountUpdated = sliderItems.length,
         gutter = options.gutter,
+        gutterPosition = (options.gutterPosition === 'right') ? 'marginRight' : 'marginLeft',
         fixedWidth = options.fixedWidth,
         controls = options.controls,
         controlsText = options.controlsText,
@@ -214,13 +216,19 @@ var tinySlider = (function () {
     // update slides' width
     function updateLayout() {
       sliderContainer.style.width = slideWidth * sliderCountUpdated + 'px';
-      if (loop) {
-        sliderContainer.style.marginLeft = - (itemsMax * slideWidth) + 'px';
+
+      var ml;
+      if (gutter !== 0 && gutterPosition === 'marginLeft') {
+        ml = (loop)? itemsMax * slideWidth + gutter : gutter;
+      } else {
+        ml = itemsMax * slideWidth;
       }
+      sliderContainer.style.marginLeft = - ml + 'px';
+
       for (var b = sliderCountUpdated; b--;) {
         sliderItems[b].style.width = slideWidth - gutter + 'px';
         if (gutter !== 0) {
-          sliderItems[b].style.marginRight = gutter + 'px';
+          sliderItems[b].style[gutterPosition] = gutter + 'px';
         }
       }
     }