build file updated to generate css min and map file

readme options instructions

Gruntfile.js

@@ -103,7 +103,7 @@ module.exports = function (grunt) {
 					cwd: 'dist/',
 					src: 'jquery.<%= pkg.name %>.css', // ['*.css', '!*.min.css'],
 					dest: 'dist/',
-					ext: '.min.css'
+					ext: '.<%= pkg.name %>.min.css'
 				}]
 			}
 		}

dist/jquery.mobile-slider.css

@@ -1,5 +1,63 @@
-/*! mobile-slider - v0.1.0 - 2016-02-04
+/*! mobile-slider - v0.1.0 - 2016-02-05
 * Copyright (c) 2016 Angel Vladov; Licensed MIT */
-.mobile-slider {
-	display: block;
+@media only screen and (min-width: 1025px) {
+	.slider-nav {
+		display: none;
+	}
+}
+
+@media only screen and (max-width: 1024px) {
+	.mobile-slider {
+
+	}
+
+	.mobile-slider .slider-content {
+		-webkit-overflow-scrolling: touch;
+
+		white-space: nowrap;
+		overflow-x: auto;
+		overflow-y: hidden;
+		padding: 0;
+	}
+
+	.mobile-slider .slider-content::-webkit-scrollbar {
+		display: none !important;
+	}
+
+	.mobile-slider .slider-content li {
+		display: inline-block;
+		vertical-align: top;
+		overflow: visible;
+		float: none;
+		/*width: x; // Width will come from the js file. */
+	}
+
+	.mobile-slider .slider-nav {
+		padding-top: 4px;
+		font-size: 0;
+		text-align: center;
+	}
+
+	.mobile-slider .slider-dot {
+		display: inline-block;
+		float: none;
+		margin: 0 6px;
+		width: 20px;
+		height: 20px;
+		border-radius: 10px;
+		border: 1px solid rgba(0, 0, 0, .2);
+		background-color: rgba(74, 73, 74, 0.2);
+		box-sizing: border-box;
+
+		-webkit-transition: all .2s ease-in-out;
+		        transition: all .2s ease-in-out;
+	}
+
+	.mobile-slider.light-dots .slider-dot {
+		background-color: rgba(255, 255, 255, .2);
+	}
+
+	.mobile-slider .slider-nav .slider-dot.active {
+		background-color: #eac042;
+	}
 }

dist/jquery.mobile-slider.js

@@ -1,15 +1,32 @@
-/*! mobile-slider - v0.1.0 - 2016-02-04
+/*! mobile-slider - v0.1.0 - 2016-02-05
 * Copyright (c) 2016 Angel Vladov; Licensed MIT */
 (function ($) {
 	'use strict';
 
-	$.fn.mobileSlider = function() {
+	$.fn.mobileSlider = function(options) {
+		var opts = $.extend({}, $.fn.mobileSlider.defaults, options);
+
 		return this.each(function() {
 			var $container = $(this);
 			var $viewPane = null;
 			var $nodes = null;
 			var $nav = null;
 			var $lastActiveNode = null;
+			var initialized = false;
+			var edgeOffset = 0;
+
+			function readAttributeOptions() {
+				var itemWidth = $container.attr('data-item-width') || $container.attr('item-width');
+				var sliderWhen = $container.attr('data-slider-when') || $container.attr('slider-when');
+
+				if (itemWidth) {
+					opts.itemWidth = itemWidth;
+				}
+
+				if (sliderWhen) {
+					opts.sliderWhen = sliderWhen;
+				}
+			}
 
 			function initializeNav() {
 				var navMarkup = '<div class="slider-dots-list">';
@@ -65,10 +82,6 @@
 				}
 			}
 
-			function listenScrollPosition() {
-				$viewPane.on('scroll', detectScrollPosition);
-			}
-
 			function scrollToNode($node) {
 				$node = $($node);
 
@@ -112,38 +125,84 @@
 				});
 			}
 
+			function handleOnResize() {
+				var screenWidth = $(window).width();
+				var sliderIsActive = $container.hasClass('slider-active');
+
+				if (screenWidth <= opts.sliderWhen) {
+					if (!sliderIsActive) {
+						initialize();
+
+						// Modify first/last node
+						edgeOffset = ($viewPane.width() - $nodes.first().width()) / 2;
+						$nodes.first().css('margin-left', edgeOffset + 'px');
+						$nodes.last().css('margin-right', edgeOffset + 'px');
+
+						$container.addClass('slider-active');
+					}
+				} else {
+					if (sliderIsActive) {
+						$nodes.first().css('margin-left', '0px');
+						$nodes.last().css('margin-right', '0px');
+
+						$container.removeClass('slider-active');
+					}
+
+				}
+			}
+
+			/**
+			 * Will be called on initialization
+			 */
 			function initialize() {
-				$viewPane = $container.find('.slider-content');
+				if (initialized) {
+					return;
+				}
+
+				initialized = true;
+				$viewPane = $container.find('ul');
 				$nodes = $viewPane.find('li');
 				$nav = $('<div class="slider-nav"></div>').appendTo($container);
 
+				// Makes styling easier
+				$viewPane.addClass('slider-content');
+
 				if ($nodes.length > 0) {
-					var liWidth = $container.attr('data-li-width') || $container.attr('li-width');
+					var itemWidth = $container.attr('data-item-width') || $container.attr('item-width');
 
-					if (liWidth) {
-						$nodes.width(liWidth);
+					if (itemWidth) {
+						$nodes.width(itemWidth);
 					}
 
-					// Modify first/last node
-					var edgeOffset = ($viewPane.width() - $nodes.first().width()) / 2;
-					var midNode = $nodes[Math.ceil($nodes.length / 2) - 1];
-
-					$nodes.first().css('margin-left', edgeOffset + 'px');
-					$nodes.last().css('margin-right', edgeOffset + 'px');
-
 					initializeNav();
-					listenScrollPosition();
+
+					// Listen for scroll position changes and update initial value
+					$viewPane.on('scroll', detectScrollPosition);
 					detectScrollPosition();
+
 					handleNavButtons();
 
+					var midNode = $nodes[Math.ceil($nodes.length / 2) - 1];
 					scrollToNode(midNode);
 				}
 			}
 
-			initialize();
+			readAttributeOptions();
+
+			$(window).on('resize orientationchange', handleOnResize);
+			handleOnResize();
 		});
 	};
 
+	$.fn.mobileSlider.defaults = {
+		itemWidth: null,
+		sliderWhen: 1024
+	};
+
+	$(document).ready(function() {
+		$('.mobile-slider').mobileSlider();
+	});
+
 	//$.fn.mobileSlider = function () {
 	//	return this.each(function (i) {
 	//		// Do something to each selected element.

readme.md

@@ -5,24 +5,63 @@
 
 ## Getting Started
 
-Download the [production version][min] or the [development version][max].
+Download the [production version][min] or the [development version][max]. Download the [styles][styles].
 
-[min]: https://raw.githubusercontent.com/angel-vladov/jquery-mobile-slider/master/dist/jquery.mobile-slider.min.js
-[max]: https://raw.githubusercontent.com/angel-vladov/jquery-mobile-slider/master/dist/jquery.mobile-slider.js
+[min]: https://raw.githubusercontent.com/angel-vladov/mobile-slider/master/dist/jquery.mobile-slider.min.js
+[max]: https://raw.githubusercontent.com/angel-vladov/mobile-slider/master/dist/jquery.mobile-slider.js
+[styles]: https://raw.githubusercontent.com/angel-vladov/mobile-slider/master/dist/jquery.mobile-slider.css
 
 In your web page:
 
 ```html
+<link href="dist/jquery.mobile-slider.css" rel="stylesheet" type="text/css">
+
 <script src="jquery.js"></script>
-<script src="dist/mobile-slider.min.js"></script>
+<script src="dist/jquery.mobile-slider.min.js"></script>
+
 <script type="application/javascript">
   $(document).ready(function ($) {
-    $('.my-slider').mobileSlider(); // "awesome"
+    $('.my-slider').mobileSlider(); // "Attach the mobile slider"
   });
 </script>
 ```
 
 
+### Options
+
+You can pass options to the mobile slider by using html attributes or via an object.
+
+_Using an object:_ 
+```javascript
+$('.my-slider').mobileSlider({
+    itemWidth: 260,
+    sliderWhen: 1024
+});
+```
+
+_Using attributes:_
+```html
+<div class="mobile-slider" data-item-width="260" data-slider-when="1024">
+```
+Prefixing attributes with _"data-"_ is optional. All the options can be passed as attributes.
+
+Supported options:
+#### sliderWhen
+
+Type: `number`
+Default: `1024`
+
+Min window width needed for the mobile slider to apply and change the layout of the element it's applied to. Nothing will happen if the browser window is wider than `sliderWhen` width _(1024px with default value)_.
+
+#### itemWidth
+
+Type: `number` or `string`
+
+If you need a specific width to be set on each list item when the mobile slider is active you can use this option. Numeric values are in pixels. If you need a value in em or percents pass a string.
+
+Example: `260px`, `4.2em`, `80%`
+
+
 ## License
 
-MIT © Angel Vladov
+MIT