wieringen · lpaulger · Oct 13, 2014 · Oct 13, 2014 · Oct 13, 2014 · Oct 13, 2014
diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,5 @@
 language: node_js
 node_js:
-  - 0.8
+  - 0.10
 before_script:
   - npm install -g grunt-cli
diff --git a/examples/responsive - Mobile/images/Thumbs.db b/examples/responsive - Mobile/images/Thumbs.db
diff --git a/examples/responsive - Mobile/images/picture1.jpg b/examples/responsive - Mobile/images/picture1.jpg
diff --git a/examples/responsive - Mobile/images/picture2.jpg b/examples/responsive - Mobile/images/picture2.jpg
diff --git a/examples/responsive - Mobile/images/picture3.jpg b/examples/responsive - Mobile/images/picture3.jpg
diff --git a/examples/responsive - Mobile/images/picture4.jpg b/examples/responsive - Mobile/images/picture4.jpg
diff --git a/examples/responsive - Mobile/images/picture5.jpg b/examples/responsive - Mobile/images/picture5.jpg
diff --git a/examples/responsive - Mobile/images/picture6.jpg b/examples/responsive - Mobile/images/picture6.jpg
diff --git a/examples/responsive - Mobile/images/picture7.jpg b/examples/responsive - Mobile/images/picture7.jpg
diff --git a/examples/responsive - Mobile/index.html b/examples/responsive - Mobile/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
+	<title>Tiny Carousel: A lightweight jQuery plugin</title>
+	<link rel="stylesheet" href="tinycarousel.css" type="text/css" media="screen"/>
+
+	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
+	<script type="text/javascript" src="../../lib/jquery.tinycarousel.js"></script>
+	<script type="text/javascript">
+		$(document).ready(function()
+		{
+			$('#slider1').tinycarousel({
+	      bullets: false,
+	      buttons: false,
+	      interval: true,
+	      intervalTime: 4000,
+	      fullWidth: true
+    	});
+		});
+	</script>
+
+</head>
+<body>
+	<div id="slider1">
+		<div class="viewport">
+			<ul class="overview">
+				<li><img src="images/picture6.jpg" /></li>
+				<li><img src="images/picture5.jpg" /></li>
+				<li><img src="images/picture4.jpg" /></li>
+				<li><img src="images/picture3.jpg" /></li>
+				<li><img src="images/picture2.jpg" /></li>
+				<li><img src="images/picture1.jpg" /></li>
+			</ul>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/examples/responsive - Mobile/tinycarousel.css b/examples/responsive - Mobile/tinycarousel.css
@@ -0,0 +1,32 @@
+/* Tiny Carousel */
+#slider1 { width: 240px; margin: 10px auto; overflow:hidden; position: relative; }
+#slider1 .viewport { height: 125px; overflow: hidden; position: relative; }
+#slider1 .buttons {
+    background: #C01313;
+    border-radius: 35px;
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 35px;
+    height: 35px;
+    color: #fff;
+    font-weight: bold;
+    text-align: center;
+    line-height: 35px;
+    text-decoration: none;
+    font-size: 22px;
+}
+#slider1 .next {
+    right: 0;
+    left: auto;
+    top: 50%;
+}
+#slider1 .buttons:hover{
+    color: #C01313;
+    background: #fff;
+}
+#slider1 .disable { visibility: hidden; }
+#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
+#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}
+#slider1 .overview li img{margin: 0 auto; display: block;}
diff --git a/lib/jquery.tinycarousel.js b/lib/jquery.tinycarousel.js
@@ -27,6 +27,7 @@
         ,   animation:      true   // false is instant, true is animate.
         ,   animationTime:  1000   // how fast must the animation move in ms?
         ,   infinite:       true   // infinite carousel.
+        ,   fullWidth:      false  // full width (mobile)
         }
     ;
 
@@ -74,6 +75,11 @@
             $overview.find(".mirrored").remove();
 
             $slides           = $overview.children();
+            if(self.options.fullWidth){
+                $container.width('100%');
+                $slides.width($container.width());
+                self.move(self.options.start || 0);
+            }
             viewportSize      = $viewport[0]["offset" + sizeLabel];
             slideSize         = $slides.first()["outer" + sizeLabel](true);
             self.slidesTotal  = $slides.length;
@@ -82,7 +88,6 @@
 
             $overview.append($slides.slice(0, slidesVisible).clone().addClass("mirrored"));
             $overview.css(sizeLabel.toLowerCase(), slideSize * (self.slidesTotal + slidesVisible));
-
             return self;
         };
 

diff --git a/lib/jquery.tinycarousel.min.js b/lib/jquery.tinycarousel.min.js